/* GENERATED by .claude/design/pages-build/mk_st_new.py from the live salesTrends.php <style> blocks (layer pgpage, scoped to <main>), then the CF2 re-skin st_pg.css (layer pg). Do not edit: rerun the script. */
@layer pgpage {

    @keyframes bounce {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-20px); }
    }

  

    /* CSS Variables - Brand Colors */
    :root {
        --primary-color: #005F6E;
        --secondary-color: #6e0f31;
        --accent-color: #ED8B00;
        --accent-color-dark: #C57300;
        --success-color: #1ABC9C;
        --success-color-dark: #16A085;
        --dark-color: #1A171B;
    }

    @keyframes drawLine {
        0% { stroke-dashoffset: 2500; opacity: 0; }
        10% { opacity: 1; }
        100% { stroke-dashoffset: 0; opacity: 1; }
    }
@scope (main) {

    .dot1 { animation-delay: 0s; }

    .dot2 { animation-delay: 0.1s; }

    .dot3 { animation-delay: 0.2s; }

    @media (min-width: 992px) {
        .topNav-navbar { min-height: 80px; }
        #navbarNavDropdown { min-height: 40px; }
    }


    /* Mobile Navigation */
    @media (max-width: 991px) {
        .topNav-navbar { min-height: 70px; }
        #navbarNavDropdown {
            position: fixed;
            top: 85px;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: calc(100vh - 85px);
            background: white;
            z-index: 1040;
            display: none;
            overflow-y: auto;
        }
        #navbarNavDropdown.show { display: block; }
    }

    .fl1 { animation-delay: 0s; }

    .fl2 { animation-delay: 0.15s; }

    .fl3 { animation-delay: 0.3s; }

    .fl4 { animation-delay: 0.45s; }

    .fl5 { animation-delay: 0.6s; }

    .fl6 { animation-delay: 0.75s; }

    .fl7 { animation-delay: 0.9s; }

    .fl8 { animation-delay: 1.05s; }

    .fl9 { animation-delay: 1.2s; }

    .fl10 { animation-delay: 1.35s; }

    .fs1 { animation-delay: 3s; }

    .fs2 { animation-delay: 3.12s; }

    .fs3 { animation-delay: 3.24s; }

    .fs4 { animation-delay: 3.36s; }

    .fs5 { animation-delay: 3.48s; }

    .fs6 { animation-delay: 3.6s; }


    /* Hover effect: darken tab on hover */
    .nav-tabs .nav-link {
      color: #1ABC9C;
      transition: background-color 0.2s, color 0.2s;
    }


    .nav-tabs .nav-link:hover {
      background-color: rgba(0, 0, 0, 0.05);
      color: #1ABC9C;
    }


    /* Underline active tab */
    .nav-tabs .nav-link.active {
      color: white;
      /* Text color */
      background-color: #14799f;
      /* Background color of the active tab */
      font-weight: 400;
      /* Font weight */
      border: none;
      /* Remove all borders */
      border-bottom: 2px solid #ED8B00;
      /* Add a solid orange bottom border */
    }


    /* Show abbreviations on small screens */
    @media (max-width: 600px) {
      .state-button .full-name {
        display: none;
      }

      .state-button .abbreviation {
        display: inline;
      }

      .desktop-only {
        display: none;
        /* Hide full text on mobile */
      }

      .mobile-only {
        display: inline;
        /* Show shortened text on mobile */
      }

      #noMistakesBanner { height: 450px; }
    }


    /* Show full names on larger screens */
    @media (min-width: 601px) {
      .state-button .full-name {
        display: inline;
      }

      .state-button .abbreviation {
        display: none;
      }

      .desktop-only {
        display: inline;
        /* Hide full text on mobile */
      }

      .mobile-only {
        display: none;
        /* Show shortened text on mobile */
      }

    }


    /* Side nav: only visible at md+ (Bootstrap d-none d-md-block on the element).
       Scope flex/sticky behaviour to the same breakpoint so we don't re-show it on mobile. */
    @media (min-width: 768px) {
      .sideNav {
        position: sticky;
        top: 105px;            /* breathing room below sticky page nav */
        align-self: flex-start;
        /* Lock to viewport height so the column behaves as a fixed-size flex container —
           this lets sticky persist all the way down the page AND lets the Go Pro banner
           flex-grow to fill the leftover height below the nav pills. is required to beat Bootstrap's `d-md-block` utility (display: block). */
        height: calc(100vh - 125px);
        min-height: 520px;
        display: flex;
        flex-direction: column;
        padding-top: 16px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
      }
      .sideNav > .nav-pills { flex: 0 0 auto; }
      .sideNav > br        { display: none; }
      /* GO PRO banner: fixed height (matches childCare.php) rather than
         flex-growing to fill the rail — keeps it ~100px shorter.
         order:-1 renders the banner ABOVE the section pills in the flex column.
         publicNav.js hides those pills (body.cfa-inpage-on) once the in-page dock
         builds — a post-paint change. With the banner ordered first, the pills
         collapsing BELOW it can't shove it upward, so no CLS (was ~0.084). The
         steady-state look is unchanged: banner still sits at the top of the rail. */
      .sideNav > #goProBanner {
        order: -1;
        flex: 0 1 auto;
        min-height: 440px;
        max-height: 440px;
        height: auto;
        margin-top: 16px;
      }
    }

    /* Reserve the floating-dock gutter up front. publicNav.js adds
       body.cfa-inpage-on AFTER first paint, which (via publicNav.css, >=1200px)
       sets #content padding-right:100px — shoving the centred .container ~50px
       left and costing ~0.017 CLS. Pre-reserving the same 100px here means the
       dock activation changes nothing. The dock always builds on this sectioned
       page, so the gutter is never wasted. */
    @media (min-width: 1200px) {
      #content { padding-right: 100px; }
    }

    .sideNav .nav-pills .nav-link,
    .sideNav .nav-pills .nav-link.active,
    .sideNav .nav-pills .show > .nav-link {
      --bs-nav-pills-link-active-color: #005F6E;
      --bs-nav-pills-link-active-bg: rgba(0, 95, 110, 0.12);
      --bs-nav-link-color: #005F6E;
      color: #005F6E;
      font-weight: 600;
      padding: 0.75rem 1rem;
      margin-bottom: 0.25rem;
      border-radius: 8px;
      transition: all 0.3s ease;
      border-left: 3px solid transparent;
      background-color: transparent;
    }

    .sideNav .nav-pills .nav-link.active {
      background-color: rgba(0, 95, 110, 0.12);
      border-left-color: #ED8B00;
    }

    .sideNav .nav-pills .nav-link:hover {
      background-color: rgba(110, 15, 49, 0.08);
      border-left-color: #6e0f31;
      color: #6e0f31;
    }


    .source {
      font-size: 12px;
      /* Adjust the size as needed */
      color: #1ABC9C;
      font-weight: 600;
      /* Keeps the font weight as semi-bold */
      display: block;
      /* Converts the span to a block-level element */
      text-align: right;
      /* Right-aligns the text within the block */
    }


    #sectionSpyDropdown {
      background-color: transparent;
      border: 1px solid silver;
      transform: scale(1.3);
      transform-origin: center;
      color: #14799f;
      margin-right: 8px;
    }


    #sectionSpyDropdown i {
      color: #14799f;
    }


    #sectionSpyDropdownMenu {
      /* Make the dropdown menu full width */
      width: 100%; /* Override Bootstrap's default width */
      left: 0; /* Override default left positioning */
      right: 0; /* Override default right positioning */
      transform: none; /* Remove any default transform applied by Bootstrap JS */

      /* --- Offset the entire menu down by adding margin-top --- */
      /* This should create a gap between the button and the menu background */
      margin-top: 20px; /* Adjust this value to control the gap size */

      /* We don't need padding-top/bottom here if margin-top is used for the gap */
      padding-top: 0;
      padding-bottom: 0;
      border-top-left-radius: 0; /* Remove rounded corners at the top */
      border-top-right-radius: 0;
      border: none; /* Remove default dropdown border if present */
      box-shadow: none; /* Remove default dropdown shadow if present */

      /* Optional: Match background color if your collapsed navbar has one */
      /* You might need to inspect your main collapsed navbar to get the exact color */
      background-color: #f8f9fa; /* Example light background */
    }



    /* Style the individual links within the dropdown menu */
    #sectionSpyDropdownMenu .dropdown-item {
      /* Increase padding to match typical nav-link padding in collapsed navbar */
      /* Inspect your main collapsed nav links (#navbarNavDropdown .navbar-nav .nav-link) for exact values */
      padding: .75rem 1rem;
      /* Example padding, adjust as needed */

      /* Add a bottom border to separate items, similar to collapsed nav links */
      border-bottom: 1px solid rgba(0, 0, 0, .125);
      /* Example border color, match your design */

      /* Ensure text color matches your main navbar link color */
      color: #333;
      /* Example dark text color, match your design */

      /* Ensure background is transparent or matches the menu background */
      background-color: transparent;

      /* Remove default dropdown item specific styles that might conflict */
      white-space: normal;
      /* Allow text wrapping if necessary */
    }


    /* Remove the bottom border from the very last item */
    #sectionSpyDropdownMenu .dropdown-item:last-child {
      border-bottom: none;
    }


    /* Style the hover and focus states for the dropdown items */
    #sectionSpyDropdownMenu .dropdown-item:hover,
    #sectionSpyDropdownMenu .dropdown-item:focus {
      /* Match your main nav link hover background and text color */
      color: #000;
      /* Example hover text color */
      background-color: #e9ecef;
      /* Example hover background color */
    }

  

                /* ---- Section frame (AreaSearch design system: Tahoma body, Raleway display, 5px radii, brand palette) ---- */
                #rentals {
                  margin: 56px 0 48px;
                  font-family: var(--f);
                  color: #1A171B;
                  /* prevent any child from pushing the section wider than its column */
                  min-width: 0; max-width: 100%;
                }

                #rentals .rent-section-header {
                  position: relative;
                  padding: 0 0 22px 16px;
                  margin-bottom: 28px;
                  border-bottom: 1px solid rgba(0,95,110,0.10);
                }

                /* Accent bar in lieu of avatar — cleaner, more data-section appropriate */
                #rentals .rent-section-header::before {
                  content: '';
                  position: absolute; left: 0; top: 4px; bottom: 18px;
                  width: 4px; border-radius: 3px;
                  background: linear-gradient(180deg, #1ABC9C 0%, #14799f 60%, #005F6E 100%);
                }

                #rentals .rent-eyebrow {
                  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                  margin-bottom: 8px;
                }

                #rentals .rent-eyebrow-label {
                  font-family: var(--f); font-size: 13px; font-weight: 700;
                  letter-spacing: 2px; text-transform: uppercase; color: #005F6E;
                }

                #rentals .rent-pill {
                  display: inline-flex; align-items: center; gap: 6px;
                  padding: 3px 10px;
                  background: rgba(26,188,156,0.12);
                  color: #0F8870;
                  font-family: var(--f); font-size: 11px;
                  letter-spacing: 1.5px; text-transform: uppercase;
                  border-radius: 100px; font-weight: 700;
                  border: 1px solid rgba(26,188,156,0.25);
                }

                #rentals .rent-pill::before {
                  content: ''; display: inline-block; width: 6px; height: 6px;
                  border-radius: 50%; background: #1ABC9C;
                  box-shadow: 0 0 0 3px rgba(26,188,156,0.25);
                }

                #rentals h3.rent-title {
                  font-family: var(--f); font-weight: 800;
                  font-size: clamp(1.5rem, 2.6vw, 2rem);
                  color: #005F6E; letter-spacing: -0.022em; line-height: 1.12;
                  margin: 0 0 10px;
                }

                #rentals h3.rent-title .rent-title-accent { color: #14799f; font-weight: 700; }

                #rentals .rent-tagline {
                  font-family: var(--f);
                  font-size: 14px; line-height: 1.55; color: #555;
                  max-width: 760px; margin: 0;
                }


                /* ---- Scope-transparency banner (shows when rental scope > suburb) ---- */
                .rent-scope-note {
                  display: flex; align-items: flex-start; gap: 12px;
                  background: #EFEDE7;  /* cream — soft, non-alarming */
                  border: 1px solid #C2C2C2; border-left: 3px solid #ED8B00;
                  border-radius: 5px;
                  padding: 12px 14px;
                  margin: 0 0 18px;
                  font-family: var(--f); font-size: 13px; color: #1A171B;
                  line-height: 1.5;
                }

                .rent-scope-note .rent-scope-icon {
                  flex: 0 0 auto;
                  font-family: var(--f); font-size: 10px; font-weight: 700;
                  letter-spacing: 1px; text-transform: uppercase;
                  color: #ED8B00;
                  border: 1px solid #ED8B00;
                  padding: 2px 7px; border-radius: 100px;
                  margin-top: 1px;
                }

                .rent-scope-note .rent-scope-text strong { color: #005F6E; }

                .rent-scope-note a { color: #14799f; font-weight: 600; text-decoration: none; }

                .rent-scope-note a:hover { color: #ED8B00; }


                /* ---- KPI strip ---- */
                .rent-kpi-row { margin: 0 0 28px; }

                .rent-kpi-card {
                  background: #FDFDFC; border-radius: 5px; padding: 18px 18px 16px;
                  border: 1px solid #C2C2C2; border-top: 2px solid #ED8B00;
                  height: 100%;
                  display: flex; flex-direction: column; justify-content: space-between;
                  transition: box-shadow 0.20s ease-in-out, border-color 0.20s ease-in-out;
                }

                .rent-kpi-card:hover {
                  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
                  border-color: #ED8B00;
                }

                .rent-kpi-card .kpi-label {
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 1.5px; text-transform: uppercase;
                  color: #005F6E; margin: 0 0 10px; line-height: 1.2;
                }

                .rent-kpi-card .kpi-value {
                  font-family: var(--f); font-size: clamp(1.55rem, 2.6vw, 2rem);
                  font-weight: 700; color: #1A171B;
                  line-height: 1.05; margin: 0; letter-spacing: -0.02em;
                  font-variant-numeric: tabular-nums;
                }

                .rent-kpi-card .kpi-value .kpi-arrow { font-size: 0.85em; margin-right: 4px; }

                .rent-kpi-card .kpi-value.kpi-up   { color: #1ABC9C; }

                .rent-kpi-card .kpi-value.kpi-down { color: #6E0F31; }

                .rent-kpi-card .kpi-sub {
                  font-family: var(--f); font-size: 12px;
                  color: #777; margin: 10px 0 0; line-height: 1.4;
                }


                /* ---- View picker (single dropdown, AreaSearch 2px-orange-top motif) ---- */
                .rent-view-bar {
                  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
                  background: #F8F9FA;
                  border: 1px solid #C2C2C2;
                  border-top: 2px solid #ED8B00;
                  border-radius: 5px;
                  padding: 12px 16px;
                  margin-bottom: 22px;
                }

                .rent-view-label {
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 2px; text-transform: uppercase; color: #005F6E;
                  margin: 0; white-space: nowrap;
                }

                .rent-view-select.form-select {
                  flex: 1 1 280px; max-width: 360px;
                  font-family: var(--f); font-size: 14px;
                  border: 1px solid #C2C2C2; border-radius: 2px;
                  padding: 7px 30px 7px 12px;
                  background-color: #fff; color: #1A171B; font-weight: 500;
                  cursor: pointer;
                  transition: border-color 0.20s ease-in-out;
                }

                .rent-view-select.form-select:hover { border-color: #1ABC9C; }

                .rent-view-select.form-select:focus {
                  border-color: #ED8B00;
                  box-shadow: 0 0 0 2px rgba(237,139,0,0.20);
                }

                .rent-view-criteria {
                  flex: 0 1 auto; margin-left: auto;
                  font-family: var(--f); font-size: 12px;
                  color: #777; font-style: italic;
                }


                /* Smoothing toggle (Quarterly vs Rolling year) */
                .rent-mode-toggle {
                  display: inline-flex; align-items: stretch;
                  border: 1px solid #C2C2C2; border-radius: 0;
                  background: #fff; overflow: hidden;
                  flex: 0 0 auto;
                }

                .rent-mode-btn {
                  appearance: none; background: transparent; border: none;
                  border-radius: 0;
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 1.2px; text-transform: uppercase;
                  color: #005F6E; padding: 7px 14px;
                  cursor: pointer;
                  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
                }

                .rent-mode-btn + .rent-mode-btn { border-left: 1px solid #C2C2C2; }

                .rent-mode-btn:hover { background: rgba(26,188,156,0.10); color: #1ABC9C; }

                .rent-mode-btn.is-active {
                  background: #005F6E; color: #fff;
                }

                .rent-mode-btn.is-active:hover { background: #005F6E; color: #fff; cursor: default; }


                /* ---- Area level bar (sits between view bar and chart, always visible) ---- */
                .rent-grain-bar {
                  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                  background: #fff;
                  border: 1px solid #C2C2C2;
                  border-left: 3px solid #005F6E;
                  border-radius: 4px;
                  padding: 8px 14px;
                  margin: -10px 0 18px;
                }

                .rent-grain-bar[hidden] { display: none; }

                /* Top-positioned variant (above the KPI strip): drop the negative top margin. */
                .rent-grain-bar-top { margin: 4px 0 18px; }

                .rent-grain-prefix {
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 2px; text-transform: uppercase; color: #005F6E;
                  white-space: nowrap;
                }

                .rent-grain-group {
                  display: inline-flex; align-items: stretch;
                  border: 1px solid #C2C2C2; border-radius: 0;
                  background: #fff; overflow: hidden;
                  flex: 0 0 auto;
                }

                .rent-grain-btn {
                  appearance: none; background: transparent; border: none; border-radius: 0;
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 1.2px; text-transform: uppercase;
                  color: #005F6E; padding: 7px 14px;
                  cursor: pointer;
                  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
                  white-space: nowrap;
                }

                .rent-grain-btn + .rent-grain-btn { border-left: 1px solid #C2C2C2; }

                .rent-grain-btn:hover { background: rgba(26,188,156,0.10); color: #1ABC9C; }

                .rent-grain-btn.is-active { background: #005F6E; color: #fff; cursor: default; }

                .rent-grain-btn.is-active:hover { background: #005F6E; color: #fff; }

                .rent-grain-btn-name {
                  display: inline-block;
                  text-transform: none;       /* preserve proper-case names like "Pyrmont" */
                  letter-spacing: 0;
                  font-weight: 700;
                }

                .rent-grain-btn-sub {
                  display: inline-block; margin-left: 6px;
                  font-family: var(--f); font-size: 10px; font-weight: 500;
                  letter-spacing: 0; text-transform: none; opacity: 0.8;
                }

                .rent-grain-hint {
                  font-family: var(--f); font-size: 12px;
                  color: #777; font-style: italic; margin-left: auto;
                }

                @media (max-width: 600px) {
                  /* Mobile: stack the prefix above the buttons, let the
                     buttons row scroll horizontally as a swiper (long LGA
                     names like "Queanbeyan-Palerang Regional Council"
                     don't fit otherwise). */
                  .rent-grain-bar { padding: 8px 10px; flex-direction: column; align-items: stretch; gap: 6px; }
                  .rent-grain-prefix { font-size: 10px; letter-spacing: 1.5px; }
                  .rent-grain-group {
                    width: 100%; display: flex;
                    overflow-x: auto;
                    -webkit-overflow-scrolling: touch;
                    scroll-snap-type: x mandatory;
                    scrollbar-width: none;
                    /* fade the right edge as a hint that there's more */
                    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
                            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
                  }
                  .rent-grain-group::-webkit-scrollbar { display: none; }
                  .rent-grain-btn {
                    scroll-snap-align: start;
                    flex: 0 0 auto;
                    padding: 8px 12px;
                  }
                  .rent-grain-btn-sub { font-size: 9px; }
                  .rent-grain-hint { width: 100%; margin-left: 0; font-size: 11px; }
                }


                /* ---- Advanced filters (toggle + collapsible panel) ---- */
                .rent-filters-toggle {
                  appearance: none;
                  display: inline-flex; align-items: center; gap: 6px;
                  background: #fff; color: #005F6E;
                  border: 1px solid #C2C2C2; border-radius: 2px;
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 1.2px; text-transform: uppercase;
                  padding: 7px 12px; cursor: pointer;
                  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
                  flex: 0 0 auto;
                }

                .rent-filters-toggle:hover { background: rgba(26,188,156,0.10); color: #1ABC9C; border-color: #1ABC9C; }

                .rent-filters-toggle[aria-expanded="true"] {
                  background: #005F6E; color: #fff; border-color: #005F6E;
                }

                .rent-filters-toggle-icon { font-size: 14px; line-height: 1; }

                .rent-filters-badge {
                  display: inline-flex; align-items: center; justify-content: center;
                  min-width: 18px; height: 18px; padding: 0 5px;
                  border-radius: 9px;
                  background: #ED8B00; color: #fff;
                  font-family: var(--f); font-size: 10px; font-weight: 700;
                  letter-spacing: 0;
                }

                .rent-filters-panel {
                  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
                  background: #fff;
                  border: 1px solid #C2C2C2;
                  border-top: 2px solid #ED8B00;
                  border-radius: 5px;
                  padding: 14px 16px;
                  margin: -10px 0 22px;   /* visually adjoin the view bar */
                }

                .rent-filters-panel[hidden] { display: none; }

                .rent-filter-cell {
                  flex: 1 1 220px; min-width: 200px; max-width: 320px;
                  display: flex; flex-direction: column; gap: 6px;
                }

                .rent-filter-cell.rent-filter-actions {
                  flex: 0 0 auto; justify-content: flex-end; align-self: center;
                  margin-left: auto; max-width: none;
                }

                .rent-filter-label {
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 2px; text-transform: uppercase; color: #005F6E;
                  margin: 0;
                }

                .rent-filter-select.form-select {
                  width: 100%;
                  font-family: var(--f); font-size: 14px;
                  border: 1px solid #C2C2C2; border-radius: 2px;
                  padding: 7px 30px 7px 12px;
                  background-color: #fff; color: #1A171B; font-weight: 500;
                  cursor: pointer;
                  transition: border-color 0.20s ease-in-out;
                }

                .rent-filter-select.form-select:hover { border-color: #1ABC9C; }

                .rent-filter-select.form-select:focus {
                  border-color: #ED8B00;
                  box-shadow: 0 0 0 2px rgba(237,139,0,0.20);
                  outline: none;
                }

                .rent-filter-hint {
                  margin: 0; font-family: var(--f); font-size: 11px;
                  color: #777; line-height: 1.4;
                }

                /* Time window slider (replaces the old select) */
                .rent-filter-cell-wide { flex: 2 1 320px; max-width: 480px; }

                .rent-filter-label-value {
                  display: inline-block; margin-left: 8px;
                  font-family: var(--f); font-size: 12px; font-weight: 700;
                  letter-spacing: 0; text-transform: none; color: #ED8B00;
                }

                .rent-slider-wrap { display: flex; flex-direction: column; gap: 4px; }

                .rent-slider-wrap input[type="range"] {
                  width: 100%;
                  appearance: none; -webkit-appearance: none;
                  height: 6px; background: linear-gradient(to right, #005F6E 0%, #1ABC9C 100%);
                  border-radius: 3px; outline: none; cursor: pointer;
                  margin: 6px 0 2px;
                }

                .rent-slider-wrap input[type="range"]::-webkit-slider-thumb {
                  appearance: none; -webkit-appearance: none;
                  width: 22px; height: 22px; border-radius: 50%;
                  background: #ED8B00; border: 3px solid #fff;
                  box-shadow: 0 0 0 1px #C2C2C2;
                  cursor: pointer;
                }

                .rent-slider-wrap input[type="range"]::-moz-range-thumb {
                  width: 18px; height: 18px; border-radius: 50%;
                  background: #ED8B00; border: 3px solid #fff;
                  box-shadow: 0 0 0 1px #C2C2C2;
                  cursor: pointer;
                }

                .rent-slider-wrap input[type="range"]:disabled {
                  opacity: 0.45; cursor: not-allowed;
                }

                .rent-slider-ticks {
                  display: flex; justify-content: space-between;
                  font-family: var(--f); font-size: 10px;
                  color: #999; padding: 0 2px;
                }

                .rent-filter-pro-link {
                  display: inline-flex; align-items: center; gap: 5px;
                  margin-left: 4px; color: #ED8B00; font-weight: 700;
                  text-decoration: none; cursor: pointer;
                }

                .rent-filter-pro-link:hover { text-decoration: underline; color: #6E0F31; }

                .rent-filter-pro-link.is-active { color: #6E0F31; }

                .rent-pro-pill {
                  display: inline-block; padding: 1px 6px; border-radius: 8px;
                  background: linear-gradient(135deg, #ED8B00, #6E0F31); color: #fff;
                  font-family: var(--f); font-size: 9px; font-weight: 700;
                  letter-spacing: 1px; text-transform: uppercase;
                }

                .rent-filters-reset {
                  appearance: none; background: transparent; color: #6E0F31;
                  border: 1px solid #6E0F31; border-radius: 2px;
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 1.2px; text-transform: uppercase;
                  padding: 7px 14px; cursor: pointer;
                  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
                }

                .rent-filters-reset:hover { background: #6E0F31; color: #fff; }

                @media (max-width: 600px) {
                  .rent-filters-panel { gap: 12px; padding: 12px; margin-top: 6px; }
                  .rent-filter-cell { flex: 1 1 100%; max-width: 100%; }
                  .rent-filter-cell.rent-filter-actions { margin-left: 0; }
                }


                /* ---- Charts ---- */
                .rent-chart-wrap {
                  background: #ffffff; border-radius: 5px; padding: 16px 12px 10px;
                  margin-bottom: 22px;
                  border: 1px solid #C2C2C2;
                  min-width: 0; max-width: 100%; overflow: hidden;
                }

                .rent-chart-wrap .chartParent { min-width: 0; max-width: 100%; }

                .rent-empty-link {
                  appearance: none; background: #005F6E; color: #fff;
                  border: none; border-radius: 2px;
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 1.2px; text-transform: uppercase;
                  padding: 6px 10px; margin: 0 4px; cursor: pointer;
                }

                .rent-empty-link:hover { background: #ED8B00; }

                .rent-empty-state {
                  padding: 60px 24px; text-align: center;
                  font-family: var(--f); color: #777; font-size: 14px;
                  background: #F5F5F5; border-radius: 5px; margin: 12px;
                }


                /* ---- Horizontal scroll container for the cuts table ---- */
                .rent-table-scroll {
                  width: 100%; max-width: 100%;
                  overflow-x: auto; overflow-y: hidden;
                  -webkit-overflow-scrolling: touch;
                  border-radius: 5px;
                }

                .rent-table-scroll #rentCutsTable { margin-bottom: 0; }

                .rent-table-scroll .dataTables_wrapper { width: 100%; }


                /* ---- Subsection headings ---- */
                #rentals h5.rent-subheading {
                  font-family: var(--f); font-weight: 700;
                  font-size: 18px; color: #005F6E;
                  margin: 32px 0 14px; letter-spacing: 0;
                  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                }

                #rentals h5.rent-subheading .rent-subhead-sub {
                  font-family: var(--f); font-size: 12px;
                  font-weight: 400; color: #777;
                }


                /* ---- Affordability lens (flat surface, no gradient — per design system) ---- */
                .rent-affordability {
                  background: #EFEDE7; /* AreaSearch cream */
                  border: 1px solid #C2C2C2;
                  border-radius: 5px;
                  padding: 20px 22px; margin: 28px 0 18px;
                }

                .rent-affordability h5 {
                  font-family: var(--f); color: #005F6E; font-weight: 700;
                  margin: 0 0 8px; font-size: 16px;
                }

                .rent-affordability p {
                  margin: 0; color: #1A171B; font-size: 14px; line-height: 1.6;
                  font-family: var(--f);
                }

                .rent-affordability strong { color: #6E0F31; font-weight: 700; }


                /* ---- Table ---- */
                #rentCutsTable {
                  font-family: var(--f); font-size: 13px;
                }

                #rentCutsTable thead th {
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 1.2px; text-transform: uppercase;
                  color: #005F6E; border-bottom: 2px solid #ED8B00;
                  background: #F8F9FA;
                }

                #rentCutsTable tbody td { vertical-align: middle; }

                #rentCutsTable tbody td.text-end { font-variant-numeric: tabular-nums; }

                .rent-quality-pill {
                  display: inline-block; padding: 2px 9px; font-size: 10px;
                  border-radius: 100px; font-weight: 700; letter-spacing: 0.8px;
                  text-transform: uppercase; font-family: var(--f);
                }

                .rent-quality-pill.q-reported  { background: rgba(26,188,156,0.18); color: #0F8870; }

                .rent-quality-pill.q-derived   { background: rgba(20,121,159,0.16); color: #14799f; }

                .rent-quality-pill.q-estimated { background: rgba(237,139,0,0.18);  color: #B36800; }

                #rentCutsTable_wrapper { margin-top: 12px; }


                /* ---- Empty state (page-level when whole section has no data) ---- */
                .rent-empty-banner {
                  background: #F5F5F5; border: 1px dashed #C2C2C2; border-radius: 5px;
                  padding: 32px 24px; text-align: center; color: #777;
                  font-family: var(--f);
                }

                .rent-empty-banner h4 {
                  font-family: var(--f); color: #005F6E;
                  font-weight: 700; margin-bottom: 10px; font-size: 16px;
                }

                .rent-empty-banner a { color: #ED8B00; font-weight: 700; text-decoration: none; }

                .rent-empty-banner a:hover { color: #1A171B; text-decoration: underline; }


                /* ---- Source footer ---- */
                #rentals .source {
                  font-family: var(--f); font-size: 12px; color: #777;
                  margin-top: 14px; line-height: 1.5;
                }


                /* ---- Responsive ---- */
                @media (max-width: 767px) {
                  #rentals { margin: 40px 0 36px; }
                  #rentals .rent-section-header { padding-left: 12px; padding-bottom: 18px; margin-bottom: 22px; }
                  #rentals h3.rent-title { font-size: 1.35rem; line-height: 1.18; }
                  #rentals .rent-tagline { font-size: 0.9rem; }
                  .rent-kpi-card { padding: 16px 16px 14px; }
                  .rent-kpi-card .kpi-value { font-size: 1.5rem; }
                  .rent-filter-card { padding: 16px 16px 10px; }
                  .rent-filter-criteria { width: 100%; text-align: left; }
                  .rent-affordability { padding: 18px 18px; }
                }

              

                /* Body text inside the whole right column */
                #salesSection, #more {
                  font-family: var(--f);
                  color: #1A171B;
                }


                /* HIGH FIX (Codex): anchored sections shouldn't land hidden behind sticky nav */
                #saleTrans, #saleTrend, #rentals, #faq, #more {
                  scroll-margin-top: 110px;
                }

                /* Section headings — match the rentals section-header pattern (accent bar + Raleway title) */
                #saleTrans > h3, #saleTrend > h3, #more > h4 { display: none; }
 /* hide the old avatar-circle pattern */

                /* New section headers — real markup (.as-section-header) placed at top of each section */
                .as-section-header {
                  position: relative;
                  padding: 0 0 22px 18px;
                  margin: 48px 0 22px;
                  border-bottom: 1px solid rgba(0,95,110,0.10);
                }

                .as-section-header::before {
                  content: '';
                  position: absolute; left: 0; top: 4px; bottom: 22px;
                  width: 4px; border-radius: 3px;
                  background: linear-gradient(180deg, #1ABC9C 0%, #14799f 55%, #005F6E 100%);
                }

                .as-section-header .as-eyebrow {
                  display: block;
                  font-family: var(--f); font-size: 13px; font-weight: 700;
                  letter-spacing: 2px; text-transform: uppercase; color: #005F6E;
                  margin: 0 0 6px;
                }

                .as-section-header .as-title {
                  display: block;
                  font-family: var(--f); font-weight: 800;
                  font-size: clamp(1.5rem, 2.6vw, 2rem);
                  color: #005F6E; letter-spacing: -0.022em; line-height: 1.12;
                  margin: 0;
                }

                /* Hide the old avatar-style h3/h4 headings inside these sections */
                #saleTrend > h3, #more > h4 { display: none; }


                /* Filter cards (sales + trends) — match the rentals view-bar dashboard style */
                #saleTrans > .card-body, #saleTrend > .card-body {
                  background: linear-gradient(180deg, #005F6E 0%, #014C58 100%);
                  background-color: #005F6E;
                  border-radius: 5px;
                  border: 1px solid #C2C2C2;
                  border-top: 2px solid #ED8B00;
                  padding: 16px 18px 12px;
                }

                #saleTrans > .card-body h6, #saleTrend > .card-body h6 {
                  font-family: var(--f);
                  font-size: 11px; font-weight: 700;
                  letter-spacing: 2px; text-transform: uppercase;
                  color: #ffffff; opacity: 0.95;
                  margin-bottom: 12px;
                }

                #saleTrans > .card-body label, #saleTrend > .card-body label {
                  font-family: var(--f); font-size: 11px; font-weight: 700;
                  letter-spacing: 1.2px; text-transform: uppercase;
                  color: rgba(255,255,255,0.85); margin-bottom: 4px; display: block;
                }

                #saleTrans > .card-body .form-select,
                #saleTrend > .card-body .form-select,
                #saleTrans > .card-body .form-control,
                #saleTrend > .card-body .form-control {
                  font-family: var(--f); font-size: 14px;
                  border: 1px solid #C2C2C2; border-radius: 2px;
                  padding: 7px 30px 7px 12px;
                  background-color: #fff;
                  color: #1A171B;
                }

                #saleTrans > .card-body .form-select:focus,
                #saleTrend > .card-body .form-select:focus,
                #saleTrans > .card-body .form-control:focus,
                #saleTrend > .card-body .form-control:focus {
                  border-color: #ED8B00;
                  box-shadow: 0 0 0 2px rgba(237,139,0,0.20);
                }

                #salesSubmit {
                  background: #ED8B00; color: #fff; border: none;
                  font-family: var(--f); font-size: 12px; font-weight: 700;
                  letter-spacing: 1.5px; text-transform: uppercase;
                  border-radius: 2px; padding: 9px 0;
                  transition: background-color 0.15s ease-in-out;
                }

                #salesSubmit:hover { background: #C57300; }

                #criteriaOut { font-family: var(--f); font-size: 12px; font-style: italic; color: #ED8B00; }

                #criteriaSaleTrendOut { font-family: var(--f); font-size: 12px; color: #ED8B00; }


                /* Sales transactions table — Raleway headers, Tahoma body, hairline rules */
                #salesTable { font-family: var(--f); font-size: 13px; }

                #salesTable thead th {
                  font-family: var(--f); font-size: 11px;
                  font-weight: 700; letter-spacing: 1.2px;
                  text-transform: uppercase; color: #005F6E;
                  border-bottom: 2px solid #ED8B00; background: #F8F9FA;
                  padding: 10px 12px;
                }

                /* Soften row rules (was using browser default dark grey) — Codex MED fix */
                #salesTable tbody tr { border-bottom: 1px solid #DDDDDD; }

                #salesTable tbody td {
                  vertical-align: middle;
                  border-top: none;
                  padding: 10px 12px;
                  line-height: 1.45;
                }

                #salesTable.table-striped > tbody > tr:nth-of-type(odd) > * {
                  background: #FDFDFC;
                  --bs-table-accent-bg: transparent;
                }

                #salesTable.table-hover > tbody > tr:hover > * {
                  background: rgba(26,188,156,0.06);
                }

                /* Right-align price and date columns (numerics) */
                #salesTable td:nth-child(4), #salesTable td:nth-child(5),
                #salesTable th:nth-child(4), #salesTable th:nth-child(5) {
                  text-align: right;
                  font-variant-numeric: tabular-nums;
                }


                /* Trend chart container — match rentals chart-wrap */
                #resTrendsParent {
                  background: #ffffff; border-radius: 5px;
                  border: 1px solid #C2C2C2;
                  padding: 16px 12px 10px;
                  margin-bottom: 22px;
                  min-width: 0; max-width: 100%; overflow: hidden;
                }


                /* CSV download cards — flat surface + 2px orange top motif */
                #salesCSVSec, #salesTrendCSVSec, #demoLinks {
                  background: #FDFDFC;
                  border: 1px solid #C2C2C2;
                  border-top: 2px solid #ED8B00;
                  border-radius: 5px;
                  box-shadow: none;
                  padding: 20px 22px;
                }

                #salesCSVSec h5, #salesTrendCSVSec h5, #demoLinks h5 {
                  font-family: var(--f); font-weight: 700;
                  font-size: 16px; color: #005F6E; margin-bottom: 6px;
                }

                #salesCSVSec p, #salesTrendCSVSec p, #demoLinks p {
                  font-family: var(--f); font-size: 14px;
                  color: #555; margin-bottom: 0;
                }

                /* Download buttons — keep the brand teal but with 2px radius + Tahoma label */
                #saleDownloadLink, #saleTrendDownloadLink, #rentDownloadLink {
                  border-radius: 2px;
                  font-family: var(--f); font-size: 12px;
                  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
                  padding: 10px 18px;
                }


                /* FAQ block — match dashboard surface */
                #faq {
                  background: #FDFDFC;
                  border: 1px solid #C2C2C2;
                  border-top: 2px solid #ED8B00;
                  border-radius: 5px;
                  box-shadow: none;
                  padding: 24px 22px;
                  margin-top: 32px;
                }

                #faq > h5, #faq .as-faq-heading {
                  font-family: var(--f); font-weight: 700;
                  font-size: 18px; color: #005F6E;
                  letter-spacing: 0;
                  margin-bottom: 4px;
                }

                #saleTrendsFAQ {
                  font-family: var(--f); font-size: 14px; line-height: 1.6; color: #1A171B;
                  margin-top: 8px;
                }


                /* ---- FAQ accordion (native <details>; sales FAQ converted via JS) ---- */
                .as-faq-accordion { margin-top: 6px; }

                .as-faq-item {
                  border-bottom: 1px solid #DDDDDD;
                }

                .as-faq-item:first-child { border-top: 1px solid #DDDDDD; }

                .as-faq-item > summary {
                  list-style: none; cursor: pointer;
                  font-family: var(--f); font-weight: 700; font-size: 14px;
                  color: #005F6E;
                  padding: 13px 32px 13px 0;
                  position: relative;
                  transition: color 0.15s ease-in-out;
                }

                .as-faq-item > summary::-webkit-details-marker { display: none; }

                .as-faq-item > summary:hover { color: #14799f; }

                .as-faq-item > summary::after {
                  content: '+';
                  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
                  font-family: var(--f); font-size: 18px; font-weight: 400;
                  color: #ED8B00; line-height: 1;
                  transition: transform 0.15s ease-in-out;
                }

                .as-faq-item[open] > summary { color: #14799f; }

                .as-faq-item[open] > summary::after { content: '\2212'; }

                .as-faq-answer {
                  font-family: var(--f); font-size: 13px; line-height: 1.65;
                  color: #1A171B;
                  padding: 0 28px 16px 0;
                }

                .as-faq-answer strong { color: #6E0F31; }


                /* MORE / Nearby Locations */
                #more { margin-top: 12px; }

                #linksContainer { margin: 0 0 18px; }

                #linksContainer a {
                  font-family: var(--f); font-size: 13px;
                  color: #14799f; font-weight: 500;
                  text-decoration: none;
                  display: inline-block; padding: 4px 0;
                  transition: color 0.15s ease-in-out;
                }

                #linksContainer a:hover { color: #ED8B00; }

                .searchBar { font-family: var(--f); }


                /* Source footer lines */
                .source {
                  font-family: var(--f); font-size: 12px;
                  color: #777; margin-top: 14px; line-height: 1.5;
                }


                /* Side nav — clean brand-aligned pills */
                .sideNav { padding-top: 4px; }

                .sideNav .nav-pills {
                  background: #FDFDFC; border: 1px solid #C2C2C2; border-top: 2px solid #ED8B00;
                  border-radius: 5px; padding: 8px 0;
                }

                .sideNav .nav-link {
                  font-family: var(--f); font-size: 12px;
                  font-weight: 700; letter-spacing: 2px;
                  text-transform: uppercase; color: #005F6E;
                  padding: 10px 18px; border-radius: 0;
                  border-left: 3px solid transparent;
                  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
                }

                .sideNav .nav-link:hover {
                  background: rgba(26,188,156,0.08);
                  color: #1ABC9C;
                }

                .sideNav .nav-link.active {
                  background: rgba(237,139,0,0.08);
                  border-left-color: #ED8B00;
                  color: #ED8B00;
                }


                /* Hide the "What will drive prices?" old CTA heading orange in favour of brand teal */
                #demoLinks h5 { color: #005F6E; }

                #demoLinks h5 strong { color: #ED8B00; }


                /* "Search any NSW suburb" form — tidy edges */
                form.w-100[onsubmit*="searchFunction"] {
                  box-shadow: none;
                  border: 1px solid #C2C2C2;
                  border-radius: 5px;
                  border-top: 2px solid #ED8B00;
                }

                form.w-100[onsubmit*="searchFunction"] .input-group { padding: 0; }

                form.w-100[onsubmit*="searchFunction"] .form-control {
                  border: none; padding: 12px 16px;
                  font-family: var(--f); font-size: 14px;
                }

                form.w-100[onsubmit*="searchFunction"] .btn-search {
                  background-color: #14799f;
                  border-radius: 0 5px 5px 0;
                }

              

  /* The Map Layers button sits clear of the FullscreenControl this page adds
     at 'top-left'; the panel's own default is the 10px Mapbox inset, which
     would land straight on top of it. #salesMap is the map container. */
  #salesMap { --ov-btn-top: 50px; --ov-panel-top: 50px; }
}
}
@layer pg {
@scope (main) {
#rentals .rent-pill,
.eco-hero-badge,
.rent-quality-pill,
.rent-scope-note .rent-scope-icon { border-radius: var(--r-1); }
}
}
@layer pg {
html[data-theme="dark"] main #preloader { background: var(--surface); }
html[data-theme="dark"] main .eco-hero-badge { color: var(--ink); }
html[data-theme="dark"] main .sideNav .nav-pills .nav-link { color: #8cb7be; }
html[data-theme="dark"] main .sideNav .nav-pills .nav-link.active { color: #8cb7be; }
html[data-theme="dark"] main .sideNav .nav-pills .show > .nav-link { color: #8cb7be; }
html[data-theme="dark"] main .sideNav .nav-pills .nav-link:hover { color: #be93a2; }
html[data-theme="dark"] main #sectionSpyDropdown { color: #95c3d4; }
html[data-theme="dark"] main #sectionSpyDropdown i { color: #95c3d4; }
html[data-theme="dark"] main #rentals { color: var(--ink); }
html[data-theme="dark"] main #rentals .rent-eyebrow-label { color: #8cb7be; }
html[data-theme="dark"] main #rentals .rent-pill { color: #93c9bf; }
html[data-theme="dark"] main #rentals h3.rent-title { color: #8cb7be; }
html[data-theme="dark"] main #rentals h3.rent-title .rent-title-accent { color: #95c3d4; }
html[data-theme="dark"] main #rentals .rent-tagline { color: var(--fg-2); }
html[data-theme="dark"] main .rent-scope-note { background: var(--alt); color: var(--ink); }
html[data-theme="dark"] main .rent-scope-note .rent-scope-text strong { color: #8cb7be; }
html[data-theme="dark"] main .rent-scope-note a { color: #95c3d4; }
html[data-theme="dark"] main .rent-kpi-card { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main .rent-kpi-card .kpi-label { color: #8cb7be; }
html[data-theme="dark"] main .rent-kpi-card .kpi-value { color: var(--ink); }
html[data-theme="dark"] main .rent-kpi-card .kpi-value.kpi-down { color: #be93a2; }
html[data-theme="dark"] main .rent-kpi-card .kpi-sub { color: var(--fg-2); }
html[data-theme="dark"] main .rent-view-bar { background: var(--alt); border-color: var(--hair); }
html[data-theme="dark"] main .rent-view-label { color: #8cb7be; }
html[data-theme="dark"] main .rent-view-select.form-select { border-color: var(--hair); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] main .rent-view-criteria { color: var(--fg-2); }
html[data-theme="dark"] main .rent-mode-toggle { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .rent-mode-btn { color: #8cb7be; }
html[data-theme="dark"] main .rent-mode-btn + .rent-mode-btn { border-left-color: var(--hair); }
html[data-theme="dark"] main .rent-grain-bar { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main .rent-grain-prefix { color: #8cb7be; }
html[data-theme="dark"] main .rent-grain-group { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .rent-grain-btn { color: #8cb7be; }
html[data-theme="dark"] main .rent-grain-btn + .rent-grain-btn { border-left-color: var(--hair); }
html[data-theme="dark"] main .rent-grain-hint { color: var(--fg-2); }
html[data-theme="dark"] main .rent-filters-toggle { background: var(--surface); color: #8cb7be; border-color: var(--hair); }
html[data-theme="dark"] main .rent-filters-panel { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main .rent-filter-label { color: #8cb7be; }
html[data-theme="dark"] main .rent-filter-select.form-select { border-color: var(--hair); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] main .rent-filter-hint { color: var(--fg-2); }
html[data-theme="dark"] main .rent-slider-ticks { color: var(--fg-2); }
html[data-theme="dark"] main .rent-filter-pro-link:hover { color: #be93a2; }
html[data-theme="dark"] main .rent-filter-pro-link.is-active { color: #be93a2; }
html[data-theme="dark"] main .rent-filters-reset { color: #be93a2; }
html[data-theme="dark"] main .rent-empty-state { color: var(--fg-2); background: var(--alt); }
html[data-theme="dark"] main #rentals h5.rent-subheading { color: #8cb7be; }
html[data-theme="dark"] main #rentals h5.rent-subheading .rent-subhead-sub { color: var(--fg-2); }
html[data-theme="dark"] main .rent-affordability { background: var(--alt); }
html[data-theme="dark"] main .rent-affordability h5 { color: #8cb7be; }
html[data-theme="dark"] main .rent-affordability p { color: var(--ink); }
html[data-theme="dark"] main .rent-affordability strong { color: #be93a2; }
html[data-theme="dark"] main #rentCutsTable thead th { color: #8cb7be; background: var(--alt); }
html[data-theme="dark"] main .rent-quality-pill.q-reported { color: #93c9bf; }
html[data-theme="dark"] main .rent-quality-pill.q-derived { color: #95c3d4; }
html[data-theme="dark"] main .rent-quality-pill.q-estimated { color: #ddbb8c; }
html[data-theme="dark"] main .rent-empty-banner { background: var(--alt); border-color: var(--hair); color: var(--fg-2); }
html[data-theme="dark"] main .rent-empty-banner h4 { color: #8cb7be; }
html[data-theme="dark"] main .rent-empty-banner a:hover { color: var(--ink); }
html[data-theme="dark"] main #rentals .source { color: var(--fg-2); }
html[data-theme="dark"] main #salesSection { color: var(--ink); }
html[data-theme="dark"] main #more { color: var(--ink); }
html[data-theme="dark"] main .as-section-header .as-eyebrow { color: #8cb7be; }
html[data-theme="dark"] main .as-section-header .as-title { color: #8cb7be; }
html[data-theme="dark"] main #saleTrans > .card-body { border-color: var(--hair); }
html[data-theme="dark"] main #saleTrend > .card-body { border-color: var(--hair); }
html[data-theme="dark"] main #saleTrans > .card-body .form-select { border-color: var(--hair); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] main #saleTrend > .card-body .form-select { border-color: var(--hair); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] main #saleTrans > .card-body .form-control { border-color: var(--hair); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] main #saleTrend > .card-body .form-control { border-color: var(--hair); background: var(--surface); color: var(--ink); }
html[data-theme="dark"] main #salesTable thead th { color: #8cb7be; background: var(--alt); }
html[data-theme="dark"] main #salesTable tbody tr { border-bottom-color: var(--hair); }
html[data-theme="dark"] main #salesTable.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--surface); }
html[data-theme="dark"] main #resTrendsParent { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main #salesCSVSec { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main #salesTrendCSVSec { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main #demoLinks { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main #salesCSVSec h5 { color: #8cb7be; }
html[data-theme="dark"] main #salesTrendCSVSec h5 { color: #8cb7be; }
html[data-theme="dark"] main #demoLinks h5 { color: #8cb7be; }
html[data-theme="dark"] main #salesCSVSec p { color: var(--fg-2); }
html[data-theme="dark"] main #salesTrendCSVSec p { color: var(--fg-2); }
html[data-theme="dark"] main #demoLinks p { color: var(--fg-2); }
html[data-theme="dark"] main #faq { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main #faq > h5 { color: #8cb7be; }
html[data-theme="dark"] main #faq .as-faq-heading { color: #8cb7be; }
html[data-theme="dark"] main #saleTrendsFAQ { color: var(--ink); }
html[data-theme="dark"] main .as-faq-item { border-bottom-color: var(--hair); }
html[data-theme="dark"] main .as-faq-item:first-child { border-top-color: var(--hair); }
html[data-theme="dark"] main .as-faq-item > summary { color: #8cb7be; }
html[data-theme="dark"] main .as-faq-item > summary:hover { color: #95c3d4; }
html[data-theme="dark"] main .as-faq-item[open] > summary { color: #95c3d4; }
html[data-theme="dark"] main .as-faq-answer { color: var(--ink); }
html[data-theme="dark"] main .as-faq-answer strong { color: #be93a2; }
html[data-theme="dark"] main #linksContainer a { color: #95c3d4; }
html[data-theme="dark"] main .source { color: var(--fg-2); }
html[data-theme="dark"] main .sideNav .nav-pills { background: var(--surface); border-color: var(--hair); }
html[data-theme="dark"] main .sideNav .nav-link { color: #8cb7be; }
html[data-theme="dark"] main form.w-100[onsubmit*="searchFunction"] { border-color: var(--hair); }
}


/* ===== CF2 re-skin of Sales Trends (layer pg: beats the page's own CSS in layer pgpage) ===== */
@layer pg {
  :root { --st-panel: var(--teal); }

  /* the hero: a short band; the content is the page */
  .pg-st-hero { min-block-size: 0; padding-block: var(--s-4) var(--s-5); }
  .pg-st-hero .pg-h1 { font-size: var(--t-xl); }
  .pg-st-hero .pg-sub { margin-block-start: var(--s-2); max-inline-size: 60rem; }
  .pg-chip-badge { text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-strong); color: var(--white); }

  /* page body: a rail with the sticky Pro banner, then the content */
  .pg-st { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); max-inline-size: var(--w-max); margin-inline: auto; padding: var(--s-5) var(--gutter) var(--s-8); }
  .pg-st-rail { display: none; }
  .pg-st-body { min-inline-size: 0; }
  @media (min-width: 62rem) {
    .pg-st { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-6); }
    .pg-st-rail { display: block; }
    .pg-st-rail > #goProBanner { position: sticky; top: calc(var(--top-h) + var(--s-5)); }
  }

  main { --font-sans: var(--f); --font-mono: var(--f); font-family: var(--f); }
  #salesMap { --ov-btn-top: 50px; --ov-panel-top: 50px; }

  /* Font Awesome loads after first paint: reserve each glyph's width so nothing moves when it arrives */
  .fas, .far, .fab { display: inline-block; min-inline-size: 1em; font-style: normal; }
}

/* ---- rail, tables, controls ---- */
@layer pg {
  @media (min-width: 62rem) {
    .pg-st { grid-template-columns: 17rem minmax(0, 1fr); }
    .pg-st-rail > #goProBanner { top: 8rem; inline-size: 100%; block-size: 27.5rem; min-block-size: 27.5rem; margin: 0; border-radius: var(--r-1); }
  }
  #goProBanner iframe { inline-size: 100%; block-size: 100%; }

  /* DataTables: the legacy page left its controls at browser default */
  main .dataTables_wrapper { font-family: var(--f); font-size: var(--t-sm); color: var(--fg-2); }
  main .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate) { padding-block: var(--s-2); }
  main .dataTables_wrapper .dataTables_length select, main .dataTables_wrapper .dataTables_filter input {
    min-block-size: 2.75rem; padding-inline: var(--s-3); border: 1px solid var(--hair-2); border-radius: var(--r-1); background: var(--surface); color: var(--fg); font: inherit;
  }
  main .dataTables_wrapper .dataTables_paginate .paginate_button { min-inline-size: 2.75rem; min-block-size: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-1); }
  main .dataTables_wrapper table.dataTable thead th { font-size: var(--t-sm); font-weight: var(--w-strong); color: var(--fg); }
  main table a { color: var(--link); }

  /* controls: 44px targets, visible focus */
  main :is(select, input[type="text"], input[type="search"], input[type="number"]):not(.dataTables_filter input) { min-block-size: 2.75rem; }
  main .btn, main .filter-btn, main button { min-block-size: 2.75rem; }
  main a:focus-visible, main button:focus-visible, main input:focus-visible, main select:focus-visible, main [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* square corners, no round pills */
  main :is(.rent-pill, .rent-grain-btn, .rent-filter-badge, .filter-count, .dropdown-menu) { border-radius: var(--r-1); }

  .pg-swipe { margin: 0 0 var(--s-1); font-size: var(--t-xs); font-weight: var(--w-strong); letter-spacing: .04em; color: var(--fg-3); text-align: end; }
}
@media (min-width: 40.01rem) { .pg-swipe { display: none !important; } }
@property --pg-edge { syntax: '<length>'; inherits: false; initial-value: 24px; }
@keyframes pgEdgeOff { to { --pg-edge: 0px; } }

/* ---- phone ---- */
@media (max-width: 40rem) {
  @layer pg {
    .pg-st-hero { padding-block: var(--s-3) var(--s-4); }
    .pg-st-hero .pg-h1 { font-size: var(--t-lg); }
    .pg-st-hero .pg-sub { font-size: var(--t-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .pg-st-hero .pg-meta { margin-block-start: var(--s-3); gap: var(--s-2); }
    .pg-st-hero .pg-chip-badge { display: none; }
    .pg-st { padding-block: var(--s-4) var(--s-7); }
    /* a table that scrolls sideways fades at its right edge, and the fade lifts when it is scrolled to the end */
    main [data-pg-swipe] { mask-image: linear-gradient(to right, #000 calc(100% - var(--pg-edge)), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--pg-edge)), transparent); }
    @supports (animation-timeline: scroll(self inline)) {
      main [data-pg-swipe] { animation: pgEdgeOff linear both; animation-timeline: scroll(self inline); animation-range: calc(100% - 2rem) 100%; }
    }
  }
}

@layer pg {
  main .st-primary { background: var(--orange); border: 1px solid var(--orange); color: var(--navy-9); font-weight: var(--w-strong); border-radius: var(--r-1); }
  main .st-primary:hover { background: var(--orange-dk); border-color: var(--orange-dk); color: var(--navy-9); }
}

@layer pg {
  /* the SELECT DATA panels are teal: their small orange text did not hold contrast, so the status lines are white */
  main :is(#criteriaSaleTrendOut, #criteriaOut) { color: var(--white); }
}

/* ---- review round 1 (Haiku) ---- */
@layer pg {
  /* the sales summary highlights are inline-styled by the app script (bright cyan, 18px): same size as the sentence, a colour that holds on white. !important beats the inline style. */
  main #salesTableText span[style*="color"] { color: var(--teal-2) !important; font-size: inherit !important; font-weight: var(--w-strong); }
  main #salesTableText p { font-size: var(--t-sm) !important; line-height: 1.6; color: var(--fg-2); }

  /* orange text on white fails contrast: the dark orange role for text */
  main :is(#demoLinks h5 strong, .rent-filter-label-value, .rent-filter-pro-link) { color: var(--orange-ink); }

  /* the three CSV downloads are one button style (the sale-trends one was a bare link) */
  main :is(#saleDownloadLink, #saleTrendDownloadLink, #rentDownloadLink) {
    display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding: .5rem 1.25rem; border-radius: var(--r-1);
    background: var(--st-panel); color: var(--white); text-decoration: none; border: 0;
  }
  main #saleTrendDownloadLink .icon-file-excel { display: none; }

  /* nearby suburbs: a tidy grid of 44px links */
  main #more > .container.my-3 { margin-inline: 0; max-inline-size: none; padding-inline: 0; }
  main #linksContainer { margin-inline: 0; }
  main #linksContainer > .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0 var(--s-4); margin-inline: 0; }
  main #linksContainer .row > * { inline-size: auto; max-inline-size: none; flex: none; padding-inline: 0; margin: 0; }
  main #linksContainer a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: var(--t-sm); color: var(--link); }

  /* the pager: square, current page filled */
  main .dataTables_wrapper .dataTables_paginate .paginate_button { border: 1px solid transparent; color: var(--link) !important; background: none !important; }
  main .dataTables_wrapper .dataTables_paginate .paginate_button.current, main .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--st-panel) !important; color: var(--white) !important; border-color: var(--st-panel); }
  main .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--fg-3) !important; }

  .pg-st-more { display: inline; }
}
@media (max-width: 40rem) {
  @layer pg {
    .pg-st-hero .pg-sub { display: block; overflow: visible; -webkit-line-clamp: unset; }
    .pg-st-hero .pg-sub .pg-st-more { display: none; }
    main #salesMap { height: 20rem !important; }
    main #criteriaSaleTrendOut { display: block; margin-block-start: var(--s-1); }
    main #salesTable td:nth-child(5), main #salesTable th:nth-child(5) { white-space: nowrap; }
    main .rent-grain-group { flex-wrap: wrap; max-inline-size: 100%; }
    main .rent-grain-btn { min-block-size: 2.75rem; }
    /* the Locations picker shows its whole selection, wrapped, instead of cutting it mid-word */
    main .bootstrap-select > .dropdown-toggle { min-block-size: 2.75rem; height: auto; white-space: normal; }
    main .bootstrap-select > .dropdown-toggle .filter-option, main .bootstrap-select > .dropdown-toggle .filter-option-inner, main .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { white-space: normal; overflow: visible; text-overflow: clip; }
    main #more > .container.my-3 { padding-inline: 0; }
  }
}

@layer pg {
  main #saleTrendAreasDiv label { color: var(--white) !important; }
}

@layer pg {
  main #linksContainer .row > .w-100 { display: none; }   /* the legacy row breaker after every fifth suburb left a gap in the grid */
}

@layer pg {
  main .rent-empty-banner a { color: var(--orange-ink); }
}

/* ---- review round 2 (Haiku) ---- */
@layer pg {
  main #criteriaSaleTrendOut { text-align: start !important; }
  main #buttonContainer a { text-align: center; justify-content: center; }
}
@media (max-width: 40rem) {
  @layer pg {
    /* a phone pager: previous, the current page, next (the numbered row wrapped onto a second line) */
    main .dataTables_wrapper .dataTables_paginate { display: flex; justify-content: center; align-items: center; gap: var(--s-2); float: none; }
    main .dataTables_wrapper .dataTables_paginate > span { display: contents; }
    main .dataTables_wrapper .dataTables_paginate .paginate_button:not(.previous):not(.next):not(.current) { display: none; }
  }
}

/* ---- dark theme: data tables and charts stay light cards (as on the benchmark pages); everything around them follows the theme ---- */
@layer pg {
  html[data-theme="dark"] main :is(#salesTable, #rentCutsTable) { color-scheme: light; --bs-table-bg: var(--white); --bs-table-striped-bg: var(--cream); --bs-table-hover-bg: var(--cream); --bs-table-color: var(--navy-9); }
  html[data-theme="dark"] main :is(#salesTable, #rentCutsTable) :is(thead, tbody) > tr > :is(th, td) { background: var(--white); color: var(--navy-9); box-shadow: none; }
  html[data-theme="dark"] main :is(#salesTable, #rentCutsTable) tbody > tr:nth-child(even) > :is(th, td) { background: var(--cream); }
  html[data-theme="dark"] main :is(#salesTable, #rentCutsTable) a { color: #0E6E7C; }
  html[data-theme="dark"] main :is(#resTrendsParent, .chartParent) { background: var(--white); color: var(--navy-9); border-radius: var(--r-1); }
}

@layer pg {
  /* beat the generated per-selector dark rules (more specific) on the table cells and the panel fields */
  html[data-theme="dark"] main :is(#salesTable, #rentCutsTable) :is(thead, tbody) > tr > :is(th, td) { background: var(--white) !important; color: var(--navy-9) !important; }
  html[data-theme="dark"] main :is(#salesTable, #rentCutsTable) tbody > tr:nth-child(even) > :is(th, td) { background: var(--cream) !important; }
  html[data-theme="dark"] main :is(#salesTable, #rentCutsTable) a { color: #0E6E7C !important; }
  html[data-theme="dark"] main .card-body :is(.form-select, .form-control) { background-color: var(--white) !important; color: var(--navy-9) !important; border-color: var(--hair-2) !important; }
}

@layer pg {
  /* DataTables clones the header into its own table (no id): same light card */
  html[data-theme="dark"] main .dataTables_wrapper table.dataTable thead > tr > th { background: var(--white) !important; color: var(--navy-9) !important; }
}

@layer pg {
  /* dark theme: the burgundy figures and the teal card headings were tuned for white */
  html[data-theme="dark"] main :is(.rent-kpi-card .kpi-value.kpi-down, .rent-filter-pro-link.is-active, .rent-filter-pro-link:hover, .rent-affordability strong, .as-faq-answer strong) { color: color-mix(in srgb, var(--burgundy) 35%, white); }
  html[data-theme="dark"] main :is(h4, h5)[style*="st-panel"] { color: color-mix(in srgb, var(--teal) 40%, white) !important; }
}

/* ---- review: Sol (24 Oct) ---- */
@layer pg {
  /* the map pins: their rules lived in the sitewide stylesheet that this page no longer loads (size and colour are set inline by the app script; Mapbox positions the element itself) */
  main #salesMap .ccMarker { display: flex; justify-content: center; align-items: center; box-sizing: border-box; border: 2px solid var(--white); border-radius: 50%; box-shadow: 0 0 2px var(--navy-9); color: var(--white); cursor: pointer; font-family: var(--f); }
  main #salesMap .ccMarker b { color: var(--white); font-weight: var(--w-strong); }

  /* the green rise figure on white was 2.4:1: the mint mixed down to a text-safe green; it stays the plain mint on the dark card */
  main .rent-kpi-card .kpi-value.kpi-up { color: color-mix(in srgb, var(--mint) 55%, var(--navy-9)); }
  html[data-theme="dark"] main .rent-kpi-card .kpi-value.kpi-up { color: var(--mint); }
  /* selected toggle buttons: white on the teal in both themes */
  html[data-theme="dark"] main :is(.rent-mode-btn.is-active, .rent-grain-btn.is-active, .rent-grain-btn.is-active .rent-grain-btn-name, .rent-grain-btn.is-active .rent-grain-btn-sub) { color: var(--white); }
}

/* ---- review: Opus (24 Oct) ---- */
@layer pg {
  .pg-st-note { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-inline-start: 3px solid var(--orange); background: var(--alt); color: var(--fg-2); font-size: var(--t-sm); }

  /* dark: the table header's own box (DataTables keeps it apart from the body) is as wide as the card, not only as wide as its last column */
  html[data-theme="dark"] main .dataTables_wrapper :is(.dataTables_scrollHead, .dataTables_scrollHeadInner) { background: var(--white); }

  /* dark: the generated per-selector rule resets the select background, which removed the arrow. Panel fields are white (dark arrow), the rest sit on dark surfaces (light arrow). */
  html[data-theme="dark"] main .form-select { background-repeat: no-repeat !important; background-position: right .75rem center !important; background-size: 16px 12px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d5dde5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; }
  html[data-theme="dark"] main .card-body .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230C141D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; }

  /* dark: the table is a light card, so its quality pills keep the colours they have on white */
  html[data-theme="dark"] main #rentCutsTable .rent-quality-pill.q-reported { color: #0F8870; }
  html[data-theme="dark"] main #rentCutsTable .rent-quality-pill.q-derived { color: #0E6E7C; }
  html[data-theme="dark"] main #rentCutsTable .rent-quality-pill.q-estimated { color: #8A4B00; }
}
@media (max-width: 40rem) {
  @layer pg {
    /* the phone pager: the current page and the next one (a lone "1 …" read as "only one page") */
    main .dataTables_wrapper .dataTables_paginate .ellipsis { display: none; }
    main .dataTables_wrapper .dataTables_paginate .paginate_button.current + .paginate_button:not(.next) { display: inline-flex; }
  }
}

/* ---- hero backdrop: the suburb's picture from the image bucket + the animated outline (the same pieces as the CF2 area pages' hero, asCss/cf2/snapshot.css .cf2-herobg) ---- */
@layer pg {
  .st-herobg { position: absolute; z-index: -1; inset-block: 0 auto; inset-inline: 0; inline-size: 100%; aspect-ratio: 5 / 3; max-block-size: 100%; pointer-events: none; mix-blend-mode: lighten; }
  .st-herobg > img, .st-herobg > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
  .st-herobg > img { object-fit: cover; opacity: 0; transition: opacity .7s ease; }
  .st-herobg.is-ready > img { opacity: 1; }
  .st-herobg > svg, .st-herobg > img {
    -webkit-mask-image: linear-gradient(#000 52%, rgb(0 0 0 / .32) 78%, transparent); mask-image: linear-gradient(#000 52%, rgb(0 0 0 / .32) 78%, transparent);
  }
  .st-herobg > img {
    -webkit-mask-image: linear-gradient(#000 52%, rgb(0 0 0 / .32) 78%, transparent), linear-gradient(90deg, transparent, rgb(0 0 0 / .08) 3%, rgb(0 0 0 / .3) 7%, rgb(0 0 0 / .65) 11%, #000 16%, #000 84%, rgb(0 0 0 / .65) 89%, rgb(0 0 0 / .3) 93%, rgb(0 0 0 / .08) 97%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(#000 52%, rgb(0 0 0 / .32) 78%, transparent), linear-gradient(90deg, transparent, rgb(0 0 0 / .08) 3%, rgb(0 0 0 / .3) 7%, rgb(0 0 0 / .65) 11%, #000 16%, #000 84%, rgb(0 0 0 / .65) 89%, rgb(0 0 0 / .3) 93%, rgb(0 0 0 / .08) 97%, transparent); mask-composite: intersect;
  }
  .st-hb-wide { display: none; opacity: 0; transition: opacity .9s ease; }
  .st-herobg.is-wide .st-hb-wide { opacity: 1; }
  .st-bg-shape { fill: rgb(26 188 156 / .08); stroke: var(--mint); stroke-opacity: .9; stroke-width: 7.5; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgb(26 188 156 / .55)); }
  @media (prefers-reduced-motion: no-preference) {
    .st-bg-shape { animation: stDraw 3.2s var(--ease) both; animation-play-state: paused; }
    .st-herobg.is-ready .st-bg-shape { animation-play-state: running; }
  }
}
@keyframes stDraw { from { stroke-dasharray: 100; stroke-dashoffset: 100; fill-opacity: 0; } to { stroke-dasharray: 100; stroke-dashoffset: 0; } }

/* ---- the map is click-to-load: the placeholder shows the same picture and outline, with a "Load interactive map" button ---- */
@layer pg {
  .st-mapwrap { position: relative; }
  .st-map-gate { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); overflow: hidden; border-radius: var(--r-1); border: 1px solid var(--hair-2); box-sizing: border-box; background: var(--navy-9); color: var(--white); }
  .st-map-gate__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 100% 50%; opacity: 0; transition: opacity .7s ease; }
  .st-map-gate.is-ready .st-map-gate__img { opacity: .92; }
  .st-map-gate__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
  .st-map-gate__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 17 25 / .15), rgb(10 17 25 / .55)); }
  .st-map-gate__btn { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 2.75rem; padding: 0 var(--s-5); border: 1px solid var(--orange); border-radius: var(--r-1); background: var(--orange); color: var(--navy-9); font: inherit; font-weight: var(--w-strong); cursor: pointer; }
  .st-map-gate__btn:hover, .st-map-gate__btn:focus-visible { box-shadow: 0 0 0 4px rgb(237 139 0 / .35), 0 6px 22px rgb(0 0 0 / .35); }
  .st-map-gate__btn:disabled { opacity: .75; cursor: progress; }
  .st-map-gate__note { position: relative; margin: 0; padding-inline: var(--s-4); color: var(--white); font-size: var(--t-sm); text-align: center; text-shadow: 0 1px 6px rgb(0 0 0 / .6); }
  .st-map-gate.is-gone { display: none; }
  .st-gate-shape { fill: rgb(26 188 156 / .08); stroke: var(--mint); stroke-opacity: .9; stroke-width: 5; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgb(26 188 156 / .55)); }
  @media (prefers-reduced-motion: no-preference) {
    .st-gate-shape { animation: stDraw 3.2s ease both; animation-play-state: paused; }
    .st-map-gate.is-ready.is-seen .st-gate-shape { animation-play-state: running; }
  }
}
@media (max-width: 40rem) { @layer pg { main #salesMap, main .st-mapwrap { min-block-size: 20rem; } } }

/* the picture sits on the right of the hero on desktop so the outline does not run under the text */
@media (min-width: 62rem) { @layer pg { .st-herobg { inset-block: 0 0; inset-inline: auto 4%; inline-size: auto; block-size: 100%; max-block-size: none; aspect-ratio: 5 / 3; } .pg-st-hero .pg-sub { max-inline-size: 46rem; } } }   /* the picture's outline (its centre) sits right of the text; the box runs past the right edge (the hero clips it) */

/* ---- review: Haiku round 1 (25 Oct) ---- */
@layer pg {
  main #salesTable td a { display: inline-flex; align-items: center; }
}
@media (max-width: 40rem) {
  @layer pg {
    main #salesTable td a { min-block-size: 2.75rem; }
    main :is(a, button)[aria-label^="View"][aria-label$="drivers"] { min-block-size: 2.75rem !important; display: inline-flex; align-items: center; justify-content: center; }
    /* the hero picture's outline ran behind the subtitle on a phone: it sits further right and quieter */
    .st-herobg { inset-inline: 38% auto; opacity: .55; }
  }
}

@layer pg {
  /* 44px controls: the numbered row buttons, the nearby-suburb links */
  main #salesTable td .btn { min-inline-size: 2.75rem; min-block-size: 2.75rem; }
  main #linksContainer a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; }
}

@layer pg {
  /* the hero picture is placed against the whole hero band, not the text column */
  .pg-st-hero .pg-wrap { position: static; }
}