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


/* CSS Variables - Brand Colors */
main {
    --primary-color: #005F6E;
    --secondary-color: #6e0f31;
    --accent-color: #ED8B00;
    --accent-color-dark: #C57300;
    --success-color: #1ABC9C;
    --success-color-dark: #16A085;
    --dark-color: #1A171B;
    --neutral-1: #999967;
    --neutral-2: #CCCCCC;
    --neutral-3: #CCCC9A;
    --dark-navy-1: #0a0f1a;
    --dark-navy-2: #141c2e;
    --dark-navy-3: #1a2540;
}

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

@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(237,139,0,0.5)); }
    50% { filter: drop-shadow(0 0 12px rgba(237,139,0,0.8)); }
}

@keyframes pulse {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes ccSpin { to { transform: rotate(360deg); } }

@keyframes cc-gate-draw { from { stroke-dasharray: 100; stroke-dashoffset: 100; fill-opacity: 0; } to { stroke-dasharray: 100; stroke-dashoffset: 0; } }

      @keyframes ccGuideBlink { 0%,100%{opacity:1;} 50%{opacity:.35;} }
@scope (main) {

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

.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; }


/* Side Navigation &mdash; replicated from salesTrends2 (card rail + eyebrow links) */
@media (min-width: 768px) {
    .sideNav {
        position: sticky;
        top: 105px;
        align-self: flex-start;
        /* fixed-height flex container: sticky persists down the page and the
           Go Pro banner flex-grows to fill the rail below the nav pills.
           No overflow set, so the column never shows a scrollbar. */
        height: calc(100vh - 125px);
        min-height: 520px;
        display: flex;
        flex-direction: column;
        padding-top: 16px;
    }
    .sideNav > .nav-pills { flex: 0 0 auto; }
    .sideNav > br { display: none; }
    .sideNav > #goProBanner {
        /* Size the walkthrough card to its content. The old Go-Pro banner fit a
           fixed 440px rail slot, but the taller walkthrough card was clipping its
           "Watch the walkthrough" CTA under the card's own overflow:hidden.
           Drop the max-height cap; flex-shrink:0 also stops the sticky flex rail
           squeezing the card below its content height. */
        /* order:-1 renders the card ABOVE the section pills. publicNav.js hides
           those pills (body.cfa-inpage-on) once the in-page dock builds &mdash; a
           post-paint change &mdash; so with the card ordered first the collapsing pills
           below it can't shove it up ~288px (was ~0.12 CLS). Look unchanged. */
        order: -1;
        flex: 0 0 auto;
        min-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 &mdash; shoving the centred .container ~50px left (~0.12 CLS here,
   with the banner shift above). Pre-reserving the same 100px means dock activation
   changes nothing; the dock always builds on this sectioned page. */
@media (min-width: 1200px) {
    #content { padding-right: 100px; }
}

.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: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #005F6E;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    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;
}


/* Map Container - Enhanced */
.map-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 95, 110, 0.1);
}

#salesMap {
    height: 500px;
    width: 100%;
    border-radius: 12px;
    contain: layout style;
}


/* DataTable - Enhanced */
.table-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: #fff;
}

#ccTable {
    margin-bottom: 0;
}

#ccTable thead th {
    background: linear-gradient(135deg, var(--primary-color) 0%, #00736d 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    border: none;
}

#ccTable tbody tr:hover {
    background-color: rgba(26, 188, 156, 0.08);
}

#ccTable tbody td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
}


/* Key Metrics Section - Enhanced */
.metrics-section {
    padding: 2rem 0;
}

.metric-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
    contain: layout style;
    min-height: 200px;
}

/* Middle row sits on AreaSearch cream so the grid still flows uniformly
   but the three rows read as a primary / context / supporting cadence. */
.metric-card-cream {
    background: #EFEDE7;
    border-color: rgba(110, 15, 49, 0.08);
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.metric-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    padding: 12px;
    background: linear-gradient(135deg, rgba(0, 95, 110, 0.1) 0%, rgba(26, 188, 156, 0.1) 100%);
    border-radius: 12px;
}

.metric-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.metric-label {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.metric-value-local {
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary-color);
    line-height: 1.2;
}

.metric-value-regional {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 500;
}


/* == Explore More section &mdash; ported from salesTrends2 .as-section-header pattern == */
.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;
}


/* Nearby suburb links grid */
#more #linksContainer { margin: 0 0 18px; }

#more #linksContainer a {
    font-family: 'Tahoma', sans-serif;
    font-size: 13px;
    color: #14799f;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    padding: 4px 0;
    transition: color .15s ease-in-out;
}

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


/* Suburb search bar &mdash; orange focus + teal button (same as salesTrends2) */
.cc-area-search {
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cc-area-search:focus-within {
    border-color: #ED8B00;
    box-shadow: 0 0 0 2px rgba(237,139,0,.2);
}

.cc-area-search .form-control {
    border: none;
    border-radius: 4px 0 0 4px;
    padding: 12px 16px;
    font-family: 'Tahoma', sans-serif;
    font-size: 14px;
    box-shadow: none;
}

.cc-area-search-btn {
    background-color: #14799f;
    border: none;
    padding: 10px 20px;
    border-radius: 0 4px 4px 0;
    color: #ED8B00;
}

.cc-area-search-btn:hover { background-color: #005F6E; color: #ED8B00; }

.cc-area-search-btn i { font-size: 14px; }


/* Live-search dropdown &mdash; bottom suburb search */
#searchResults {
    font-family: 'Tahoma', sans-serif;
    font-size: 14px;
}

.cc-area-search-hint {
    color: #555;
    font-style: italic;
    font-size: 13px;
    padding: 6px 4px;
}

.cc-area-search-hint i { color: #ED8B00; margin-right: 4px; }

.cc-area-result-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    background: #fff;
    border: 1px solid #C2C2C2;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.cc-area-result-list li { border-top: 1px solid #ECECEC; }

.cc-area-result-list li:first-child { border-top: 0; }

.cc-area-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: #14799f;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.cc-area-result:hover { background: rgba(26, 188, 156, .08); color: #005F6E; }

.cc-area-result-state {
    font-family: var(--f);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #777;
}

.cc-area-result-icon {
    color: #ED8B00;
    margin-right: 8px;
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.cc-area-result-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }


/* "What will drive demand?" callout &mdash; match salesTrends2 #demoLinks */
#demoLinks {
    background: #FDFDFC;
    border: 1px solid #C2C2C2;
    border-top: 2px solid #ED8B00;
    border-radius: 5px;
    box-shadow: none;
}

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

#demoLinks h5 strong { color: #ED8B00; }

#demoLinks p {
    font-family: 'Tahoma', sans-serif;
    font-size: 14px;
    color: #555;
    line-height: 1.55;
    margin-bottom: 0;
}

#demoButtonContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

#demoButtonContainer .cc-driver-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #005F6E;
    color: #fff;
    font-family: var(--f);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 11px 20px;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

#demoButtonContainer .cc-driver-btn:hover {
    background: #14799f;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 95, 110, .2);
}

/* Mobile &mdash; buttons full-width stacked */
@media (max-width: 767.98px) {
    #demoButtonContainer { align-items: stretch; }
    #demoButtonContainer .cc-driver-btn { width: 100%; }
}


/* Rich Map Popups &mdash; ported from modalSecMedical.php, retinted for childcare brand */
.cc-rich-popup.mapboxgl-popup { z-index: 10; }

.cc-rich-popup .mapboxgl-popup-content {
    border-radius: 5px;
    padding: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
    border: 1px solid #C2C2C2;
    overflow: hidden;
    min-width: 240px;
    max-width: 320px;
}

.cc-rich-popup .mapboxgl-popup-close-button {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 4px 8px;
    right: 2px;
    top: 2px;
    z-index: 2;
    transition: color .15s;
}

.cc-rich-popup .mapboxgl-popup-close-button:hover { color: #fff; }

.cc-popup { font-family: 'Tahoma', sans-serif; font-size: 0.82rem; line-height: 1.5; }

.cc-popup-header {
    background: linear-gradient(135deg, #005F6E 0%, #003e4d 100%);
    color: #fff;
    padding: 12px 14px 10px;
    font-family: var(--f);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
}

.cc-popup-header small {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 3px;
    letter-spacing: .02em;
}

.cc-pop-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--f);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    vertical-align: 3px;
    line-height: 1.4;
}

.cc-pop-badge-public   { background: rgba(37,99,235,.18);  color: #93c5fd; border: 1px solid rgba(37,99,235,.45); }

.cc-pop-badge-catholic { background: rgba(139,26,58,.25);  color: #fbcfe8; border: 1px solid rgba(139,26,58,.5); }

.cc-pop-badge-private  { background: rgba(237,139,0,.22);  color: #fde68a; border: 1px solid rgba(237,139,0,.5); }

.cc-popup-header.type-school   { background: linear-gradient(135deg, #6e0f31 0%, #4d0b22 100%); }

.cc-popup-header.type-ldc      { background: linear-gradient(135deg, #6e0f31 0%, #8f2034 100%); }

.cc-popup-header.type-ohsc     { background: linear-gradient(135deg, #1ABC9C 0%, #008557 100%); }

.cc-popup-header.type-psk      { background: linear-gradient(135deg, #ED8B00 0%, #c57300 100%); }

.cc-popup-header.type-fdc      { background: linear-gradient(135deg, #005F6E 0%, #00736d 100%); }

.cc-popup-body { padding: 10px 14px 12px; }

.cc-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 0.78rem;
    color: #4a5560;
}

.cc-popup-row i.fas, .cc-popup-row i.fab {
    width: 14px;
    text-align: center;
    color: #14799f;
    font-size: 12px;
}

.cc-popup-row strong { color: #1A171B; font-weight: 700; }

.cc-popup-row.cc-popup-desc {
    align-items: flex-start;
    color: #4a5560;
    font-style: italic;
    padding-top: 6px;
    line-height: 1.45;
}

.cc-popup-row.cc-popup-desc i { margin-top: 2px; }

.cc-popup-row.cc-popup-existing {
    background: rgba(110, 15, 49, .07);
    color: #6E0F31;
    padding: 5px 8px;
    border-radius: 3px;
    margin-top: 4px;
}

.cc-popup-row.cc-popup-existing i { color: #6E0F31; }

.cc-popup-divider { height: 1px; background: #E2E5E7; margin: 8px 0; }

.cc-popup-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.cc-popup-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #005F6E;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #C2C2C2;
    background: #FDFDFC;
    transition: all .15s ease;
    white-space: nowrap;
}

.cc-popup-link i { font-size: 10px; }

.cc-popup-link:hover { background: #005F6E; color: #fff; border-color: #005F6E; }

.cc-popup-link-primary {
    background: #ED8B00;
    color: #fff;
    border-color: #ED8B00;
}

.cc-popup-link-primary:hover { background: #c57300; border-color: #c57300; color: #fff; }


/* FAQ &mdash; ported from salesTrends2 (#faq + .as-faq-* native <details> accordion) */
#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: 0 0 4px;
}

.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: 'Tahoma', sans-serif; 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: 'Tahoma', sans-serif;
    font-size: 13px;
    line-height: 1.65;
    color: #1A171B;
    padding: 0 28px 16px 0;
}

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


/* More Section - Enhanced */
.nearby-section {
    padding: 2rem 0;
}

.nearby-link {
    display: inline-block;
    padding: 4px 0;
    background: none;
    color: #14799f;
    border-radius: 0;
    text-decoration: none;
    font-family: 'Tahoma', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: color .15s ease;
    margin: 0;
}

.nearby-link:hover {
    background: none;
    color: #ED8B00;
    transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* CTA Box - Enhanced */
.cta-box {
    background: linear-gradient(145deg, #0a4a56 0%, var(--primary-color) 40%, #14799f 100%);
    border-radius: 20px;
    padding: 2.5rem;
    color: white;
    box-shadow: 0 12px 40px rgba(0, 95, 110, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(237,139,0,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.cta-box::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(20,121,159,0.2) 0%, transparent 70%);
    pointer-events: none;
}

.cta-box .cta-header {
    position: relative;
    z-index: 1;
}

.cta-box h5 {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 10px rgba(237,139,0,0.3);
}

.cta-box h5 .highlight-icon {
    display: inline-block;
    margin-right: 0.5rem;
    animation: pulse-glow 2s ease-in-out infinite;
}

.cta-box > p, .cta-box .cta-description {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.cta-box .cta-description strong {
    color: var(--accent-color);
    font-weight: 600;
}

.cta-box .cta-subdescription {
    position: relative;
    z-index: 1;
}

.area-analysis-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
}

.area-analysis-link:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.cta-box .section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(237,139,0,0.4), rgba(255,255,255,0.2), rgba(237,139,0,0.4), transparent);
    margin: 2rem 0;
}

.cta-box h6.section-title {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

.cta-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, #f5a623 100%);
    border: none;
    padding: 14px 28px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(237,139,0,0.35);
    position: relative;
    overflow: hidden;
}

.cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(237,139,0,0.45);
}

.cta-btn:hover::before {
    left: 100%;
}


/* Steps Section */
.steps-container {
    position: relative;
    z-index: 1;
}

.step {
    padding: 1.5rem 1rem;
    position: relative;
    transition: transform 0.3s ease;
}

.step:hover {
    transform: translateY(-4px);
}

.step:hover .icon-step {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(237,139,0,0.5);
}

.icon-step {
    width: 56px;
    height: 56px;
    background: linear-gradient(145deg, var(--accent-color) 0%, #f5a623 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.35rem;
    margin: 0 auto 1rem;
    box-shadow: 0 6px 20px rgba(237,139,0,0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.icon-step::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(237,139,0,0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.step:hover .icon-step::after {
    opacity: 1;
}

/* Step connector lines */
@media (min-width: 768px) {
    .steps-container .step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: calc(1.5rem + 28px);
        right: -10%;
        width: 20%;
        height: 2px;
        background: linear-gradient(90deg, rgba(237,139,0,0.5), rgba(255,255,255,0.2));
    }
}


/* CTA Search Form */
.cta-search-form {
    position: relative;
    z-index: 1;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.cta-search-form .form-control {
    border: none;
    padding: 1.1rem 1.25rem;
    font-size: 1rem;
    background: rgba(255,255,255,0.95);
    transition: background 0.3s ease;
}

.cta-search-form .form-control:focus {
    background: #fff;
    box-shadow: none;
    outline: none;
}

.cta-search-form .form-control::placeholder {
    color: #888;
}

.cta-search-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, #f5a623 100%);
    border: none;
    padding: 0 1.75rem;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.cta-search-btn:hover {
    background: linear-gradient(135deg, #f5a623 0%, var(--accent-color) 100%);
    color: white;
}

.cta-search-btn .btn-text {
    display: none;
}

@media (min-width: 576px) {
    .cta-search-btn .btn-text {
        display: inline;
    }
}


/* Source Text */
.source {
    font-size: 12px;
    color: var(--success-color);
    font-weight: 600;
    display: block;
    text-align: right;
}


/* Mobile Styles */
@media (max-width: 768px) {
    html { overflow-x: hidden; }
    body { -webkit-overflow-scrolling: touch; }
    .eco-hero { padding: 2rem 0 1.75rem; }
    .eco-hero-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .eco-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .metric-value-local { font-size: 1.5rem; }
    .desktop-only { display: none; }
    .mobile-only { display: inline; }
    /* Fix iframe banner heights for mobile */
    #noMistakesBanner { height: 450px; }
    #downloadBanner iframe { height: 100%; }
}

@media (min-width: 769px) {
    .desktop-only { display: inline; }
    .mobile-only { display: none; }
}


/* 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; }
}


/* Bootstrap Select Orange */
.btnOrangeInline {
    background-color: #ED8B00;
    color: #fff;
    border-color: orange;
}

.btnOrangeInline:hover,
.btnOrangeInline:focus {
    background-color: #ff7f00;
    border-color: #ff7f00;
}


/* Icon Fixed Size */
.icon-fixed-size {
    width: 64px;
    height: 64px;
}


/* Map Controls &mdash; aligned with salesTrends2 / DA filter design system */
.map-controls-card .form-label {
    font-family: var(--f);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #005F6E;
    margin-bottom: .5rem;
}

.map-controls-card .bootstrap-select > .dropdown-toggle {
    background-color: #fff;
    border: 1px solid #C2C2C2;
    border-radius: 2px;
    padding: .5rem .75rem;
    font-family: 'Tahoma', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1A171B;
    box-shadow: none;
    min-height: 38px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.map-controls-card .bootstrap-select > .dropdown-toggle:hover {
    border-color: #1ABC9C;
}

.map-controls-card .bootstrap-select > .dropdown-toggle:focus,
.map-controls-card .bootstrap-select.show > .dropdown-toggle {
    border-color: #ED8B00;
    box-shadow: 0 0 0 2px rgba(237, 139, 0, .2);
    background-color: #fff;
    outline: none;
}

.map-controls-card .bootstrap-select .filter-option-inner-inner {
    color: #1A171B;
    font-size: 13px;
    line-height: 1.4;
}

.map-controls-card .dropdown-menu {
    border: 1px solid #C2C2C2;
    border-top: 2px solid #ED8B00;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    border-radius: 2px;
    padding: .35rem;
    background: #fff;
}

.map-controls-card .dropdown-item {
    border-radius: 2px;
    margin-bottom: 1px;
    font-family: 'Tahoma', sans-serif;
    font-size: 13px;
    padding: .45rem .6rem;
    color: #1A171B;
}

.map-controls-card .dropdown-item:hover,
.map-controls-card .dropdown-item:focus {
    background-color: rgba(26, 188, 156, .10);
    color: #1A171B;
}

.map-controls-card .dropdown-item.active,
.map-controls-card .dropdown-item:active,
.map-controls-card .dropdown-item.selected,
.map-controls-card .dropdown-item.selected.active {
    background-color: rgba(0, 95, 110, .08);
    color: #005F6E;
}

.map-controls-card .dropdown-item.selected .check-mark {
    color: #ED8B00;
}

/* "Select All / Deselect All" actionsbox row */
.map-controls-card .bs-actionsbox {
    padding: .35rem .35rem .5rem;
    border-bottom: 1px solid #E2E5E7;
    margin-bottom: .35rem;
}

.map-controls-card .bs-actionsbox .btn {
    font-family: var(--f);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border: 1px solid #C2C2C2;
    border-radius: 2px;
    color: #005F6E;
    background: #fff;
    padding: .35rem .65rem;
}

.map-controls-card .bs-actionsbox .btn:hover {
    background: rgba(26, 188, 156, .10);
    color: #1ABC9C;
    border-color: #1ABC9C;
}


/* Metric Text Weight Reduction */
.metric-value-local {
    font-weight: 600; /* Reduced from 700 */
}

.metric-value-regional {
    font-weight: 400; /* Reduced from 500 */
}


/* Map Overlay Controls */
.map-container {
    position: relative;
    overflow: visible; /* Allow dropdowns to show */
}

/* The Map Layers button sits where the old Map Options button sat: below the
   FullscreenControl this page adds at 'top-left'. The panel's own default is
   the 10px Mapbox control inset, which would put it straight on top of that
   control. */
.map-container {
    --ov-btn-top: 50px;
    --ov-panel-top: 50px;
}


/* --- ENHANCED LAYOUT STYLES --- */

/* Control Panel Card &mdash; matches .da-filter-card / .rent-view-bar */
.map-controls-card,
.map-controls-card.p-4 {
    background: #F8F9FA;
    border: 1px solid #C2C2C2;
    border-top: 2px solid #ED8B00;
    border-radius: 5px;
    box-shadow: none;
    padding: 14px 16px;
}


/* Section headings &mdash; replicated from salesTrends2 (clean Raleway, no underline) */
h3 {
    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;
}


/* Steps Connection */
.steps-container {
    position: relative;
}

.step {
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .steps-container::before {
        content: '';
        position: absolute;
        top: 40px; /* Adjust based on icon size/padding */
        left: 20%;
        right: 20%;
        height: 2px;
        background: rgba(255, 255, 255, 0.2);
        z-index: 1;
    }
}


/* Table Enhancements */
#ccTable {
    border-collapse: separate;
    border-spacing: 0;
}

#ccTable thead th:first-child { border-top-left-radius: 12px; }

#ccTable thead th:last-child { border-top-right-radius: 12px; }

#ccTable tbody tr { transition: transform 0.2s ease, box-shadow 0.2s ease; }

#ccTable tbody tr:hover {
    transform: scale(1.005);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background-color: #fff; /* Override striping */
    z-index: 2;
    position: relative;
}


/* FAQ Enhancements */
.faq-item {
    border: none;
    background: #fdfdfd;
}

.faq-question:hover {
    color: var(--accent-color);
}


/* Nearby Links &mdash; plain text, no pill (salesTrends2 motif) */
.nearby-link {
    background: none;
    color: #14799f;
    font-weight: 600;
    border: none;
    padding: 4px 0;
    box-shadow: none;
}

.nearby-link:hover {
    background: none;
    color: #ED8B00;
    border: none;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Search Bar Enhanced */
.search-form-hero {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-radius: 50px; /* Pillow shape */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.search-form-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.search-form-hero .form-control {
    border: none;
    padding: 1.25rem 2rem;
    font-size: 1.1rem;
    background: #fff;
}

.search-form-hero .form-control:focus {
    box-shadow: none;
    background: #fdfdfd;
}

.search-form-hero .btn {
    padding: 0 2rem;
    background: var(--primary-color);
    transition: background 0.3s;
}

.search-form-hero .btn:hover {
    background: var(--secondary-color);
}


/* ============================================================
   CHILDCARE DEVELOPMENT APPROVALS SECTION
   AreaSearch design system &mdash; flat, sharp, small radii, light shadow
   ============================================================ */
.da-section { padding-top: 0.5rem; }


/* Notify Me CTA &mdash; sits inline at the right of the .da-coverage-note */
.da-notify-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    background: linear-gradient(135deg, #6e0f31 0%, #4b0a22 100%);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    white-space: nowrap;
    margin-left: auto;
    align-self: center;
    flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(110,15,49,.3);
    transition: transform .15s ease, box-shadow .15s ease;
}

.da-notify-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(110,15,49,.4); color: #fff; background: linear-gradient(135deg, #7d1238 0%, #5a0d28 100%); }

.da-notify-cta i { color: #ED8B00; font-size: .9rem; }

@media (max-width: 640px) {
    .da-coverage-note { flex-wrap: wrap; }
    .da-notify-cta { margin-left: 28px; margin-top: .5rem; }
}


/* KPI strip &mdash; flat surface, 2px orange top motif, 5px radius */
.da-kpi-card {
    background: #FDFDFC;
    border-radius: 5px;
    padding: 16px 16px 14px;
    border: 1px solid #C2C2C2;
    border-top: 2px solid var(--accent-color);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out;
}

.da-kpi-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    border-color: var(--accent-color);
}

.da-kpi-label {
    font-family: var(--f);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin: 0 0 8px;
}

.da-kpi-value {
    font-family: var(--f);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.da-kpi-sub { font-size: 12px; color: #777; margin-top: 6px; }


/* Search / filter bar &mdash; flat teal, sharp */
.da-filter-card {
    background: linear-gradient(180deg, #14799f 0%, #126b8d 100%);
    border-radius: 6px;
    padding: .85rem 1rem .9rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Section label &mdash; small uppercase header sitting above the toolbar */
.da-filter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.da-filter-head-label {
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.da-filter-head-label i { font-size: .72rem; color: rgba(255,255,255,.7); }

.da-filter-head-hint {
    color: rgba(255,255,255,.6);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .01em;
}

/* Flat toolbar &mdash; main inputs sit transparently inside the bar; buttons stand out */
.da-filter-toolbar {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.da-search-group {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    padding: 0 .8rem;
    min-height: 38px;
    transition: border-color .15s ease, background .15s ease;
}

.da-search-group:focus-within {
    border-color: var(--accent-color);
    background: rgba(255,255,255,.12);
}

.da-search-icon { color: rgba(255,255,255,.7); font-size: .9rem; flex-shrink: 0; }

.da-search-group .form-control {
    flex: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    color: #fff;
    font-size: .9rem;
    padding: .4rem 0;
    min-width: 0;
}

.da-search-group .form-control::placeholder { color: rgba(255,255,255,.55); }


.da-toolbar-select {
    flex: 0 1 180px;
    min-width: 140px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: .9rem;
    min-height: 38px;
    border-radius: 4px;
    padding: .4rem 2rem .4rem .8rem;
    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='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 14px;
    box-shadow: none;
}

.da-toolbar-select:focus { border-color: var(--accent-color); }

.da-toolbar-select option { background: #fff; color: #333; }


.da-filter-toolbar .btn {
    font-size: .85rem;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 4px;
    min-height: 38px;
    white-space: nowrap;
    transition: all .15s ease;
}

.da-btn-primary {
    background-color: var(--accent-color);
    color: #fff;
    border: 1px solid var(--accent-color);
}

.da-btn-primary:hover { background-color: #d17a00; border-color: #d17a00; color: #fff; }

.da-btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
}

.da-btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.da-btn-outline.active {
    background: #fff;
    color: var(--primary-color);
    border-color: #fff;
}


.da-adv-controls {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: .15rem;
}

.da-filter-status {
    color: rgba(255,255,255,.85);
    font-size: .8rem;
    line-height: 1.45;
    margin: .8rem 0 0;
    padding-top: .65rem;
    border-top: 1px solid rgba(255,255,255,.12);
}

.da-filter-status strong { color: #fff; font-weight: 700; }

.da-filter-status .fa-circle-notch { color: rgba(255,255,255,.7); }


/* Advanced toggle (inline, transparent &mdash; sits inside the toolbar) */
.da-adv-toggle {
    background: transparent;
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 600;
    padding: .4rem .8rem;
    min-height: 38px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.da-adv-toggle:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: #fff; }

.da-adv-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.45);
    color: #fff;
}

.da-adv-active-count {
    display: inline-flex;
    align-items: center;
    background: var(--accent-color);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    height: 22px;
}

.da-adv-clear {
    background: transparent;
    color: rgba(255,255,255,.7);
    border: none;
    font-size: .95rem;
    padding: .25rem .45rem;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
}

.da-adv-clear:hover { color: #fff; background: rgba(255,255,255,.12); }


/* Advanced panel opens BELOW the toolbar &mdash; no inner card, just a hairline */
.da-adv-panel {
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(255,255,255,.15);
}

.da-adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .65rem .75rem;
    align-items: end;
}

.da-adv-field { min-width: 0; }

.da-adv-label {
    display: block;
    color: rgba(255,255,255,.8);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}

.da-adv-field .form-control,
.da-adv-field .form-select {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .85rem;
    padding: .4rem .65rem;
    color: #333;
    width: 100%;
    box-shadow: none;
}

.da-adv-field .form-control:focus,
.da-adv-field .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(237,139,0,.25);
    outline: none;
}

.da-adv-field .form-control:disabled,
.da-adv-field .form-select:disabled { background: #f0f0f0; color: #555; cursor: not-allowed; }


.da-date-range { display: flex; gap: .35rem; }

.da-date-range .form-control { flex: 1; min-width: 0; }


.da-existing-field .da-adv-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 33px;
    padding: .35rem .7rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 4px;
    color: #fff;
    font-size: .8rem;
    line-height: 1.25;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.da-existing-field .da-adv-check:hover { background: rgba(255,255,255,.15); }

.da-existing-field .form-check-input {
    margin: 0;
    flex: 0 0 auto;
    background-color: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.45);
}

.da-existing-field .form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.da-existing-field .form-check-label { margin: 0; cursor: pointer; max-width: none; }


/* Responsive */
@media (max-width: 767.98px) {
    .da-filter-toolbar { gap: .4rem; }
    .da-search-group { flex: 1 1 100%; order: -1; }
    .da-toolbar-select { flex: 1 1 100%; }
    .da-filter-toolbar .btn,
    .da-adv-toggle { flex: 1 1 calc(50% - .2rem); }
    .da-adv-controls { flex: 1 1 100%; justify-content: space-between; margin-left: 0; }
}


/* Project (grouped) row chrome */
.da-sib-pill {
    display: inline-block;
    background: rgba(0,95,110,.12);
    color: var(--primary-color);
    border-radius: 999px;
    padding: .12rem .55rem;
    font-size: .7rem;
    font-weight: 700;
    margin-left: .35rem;
    letter-spacing: .02em;
}

.da-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: .35rem;
    padding: 0;
    background: #fff;
    border: 1px solid #C2C2C2;
    border-radius: 4px;
    color: #14799f;
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.da-view-btn:hover {
    background: #ED8B00;
    border-color: #ED8B00;
    color: #fff;
}

.da-view-btn i { font-size: 11px; }

.da-detail-siblings {
    margin-top: .85rem;
    padding-top: .6rem;
    border-top: 1px dashed #D6D6D6;
}

.da-detail-siblings h6 {
    color: var(--primary-color);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 .45rem;
}

.da-sib-list { display: flex; flex-direction: column; gap: .35rem; }

.da-sib-item {
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    gap: .65rem;
    align-items: center;
    padding: .4rem .6rem;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 3px;
    font-size: .82rem;
}

.da-sib-item .sib-date { color: #777; font-variant-numeric: tabular-nums; }

.da-sib-item .sib-desc {
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.da-sib-item .sib-da   { color: #555; font-size: .72rem; font-weight: 600; }

.da-sib-empty { color: #888; font-size: .8rem; font-style: italic; }


@media (max-width: 768px) {
    .da-sib-item {
        grid-template-columns: 1fr;
        gap: .2rem;
    }
    .da-sib-item .sib-desc { white-space: normal; }
}


/* Results table &mdash; flat, hairline borders */
.da-table-wrap {
    border: 1px solid #C2C2C2;
    border-radius: 5px;
    background: #fff;
    overflow-x: auto;
}

#daTable { margin-bottom: 0; width: 100%; }

#daTable thead th {
    background: linear-gradient(135deg, var(--primary-color) 0%, #00736d 100%);
    color: #fff;
    font-weight: 600;
    font-size: .76rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .8rem .9rem;
    border: none;
    white-space: nowrap;
}

#daTable tbody td {
    padding: .7rem .9rem;
    vertical-align: middle;
    font-size: .87rem;
    border-bottom: 1px solid #EDEDED;
}

#daTable tbody tr { cursor: pointer; }

#daTable tbody tr:hover { background-color: rgba(26,188,156,.07); }

#daTable tbody tr.shown { background-color: rgba(0,95,110,.05); }

.da-addr { font-weight: 600; color: var(--primary-color); }

.da-da-number { display: block; font-size: .72rem; color: #999; font-weight: 500; margin-top: 1px; }

.da-desc { color: #555; max-width: 300px; }

.da-places { font-weight: 700; color: var(--primary-color); font-variant-numeric: tabular-nums; }

.da-places-none { color: #bbb; font-weight: 400; }


/* Distance + direction */
.da-dist { white-space: nowrap; font-variant-numeric: tabular-nums; color: #444; }

.da-dir { display: inline-block; margin-left: 4px; color: var(--accent-color); font-size: .8rem; }

.da-dir-label { font-size: .72rem; color: #999; margin-left: 2px; }


/* Existing-centre flag */
.da-existing {
    display: inline-block;
    margin-top: 3px;
    padding: .1rem .45rem;
    background: rgba(110,15,49,.1);
    color: var(--secondary-color);
    border-radius: 2px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
}


/* Status badges &mdash; flat, sharp */
.da-badge {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: 2px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.da-badge-approved { background: rgba(26,188,156,.15); color: #138a73; }

.da-badge-pending  { background: rgba(237,139,0,.16);  color: #b56a00; }

.da-badge-rejected { background: rgba(110,15,49,.12);  color: var(--secondary-color); }

.da-badge-neutral  { background: #ECECEC;              color: #555; }


/* Expandable detail row */
.da-detail { background: #F8F9FA; padding: 1rem 1.15rem; font-size: .85rem; color: #444; }

.da-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .55rem 1.25rem;
    margin-bottom: .75rem;
}

.da-detail-k {
    display: block;
    font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--primary-color);
}

.da-detail-v { display: block; font-size: .9rem; color: #1A171B; }

.da-detail-notes {
    border-left: 2px solid var(--accent-color);
    padding: .5rem .75rem;
    background: #fff;
    color: #444;
    margin-top: .5rem;
}

.da-detail-notes b { color: var(--primary-color); }

.da-detail a { color: var(--primary-color); font-weight: 600; }


/* Scale chip &mdash; Minor / Moderate / Major.
   Used in the expanded DA detail. Colours are tuned to the existing childcare
   palette: secondary red is reserved for emphasis (Major), warm sand for the
   middle band, neutral grey for Minor. */
.da-scale-pill {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: help;
}

.da-scale-minor    { background: #eef0f3; color: #4a5568; border-color: #d6dbe1; }

.da-scale-moderate { background: #fdf1de; color: #8a5a00; border-color: #f1d8a3; }

.da-scale-major    { background: #fbe4ec; color: #6e0f31; border-color: #e9bccb; }


/* Key-issue pill &mdash; small neutral chip per issue. */
.da-issue-pill {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 4px;
    background: #f3f4f6;
    border: 1px solid #e1e3e8;
    color: #444;
    font-size: .75rem;
    margin-right: .25rem;
    margin-bottom: .15rem;
}


/* Empty / no-coverage state */
.da-empty {
    text-align: center;
    padding: 2.25rem 1.5rem;
    background: #fff;
    border: 1px dashed #C2C2C2;
    border-radius: 5px;
    color: #667;
}

.da-empty i { font-size: 1.9rem; color: var(--accent-color); margin-bottom: .6rem; display: block; }


/* DataTables chrome */
#daTable_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    border-radius: 2px;
}

#daTable_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    border-radius: 2px;
}

#daTable_wrapper .dataTables_info { font-size: .8rem; color: #777; padding: .85rem .9rem 0; }

#daTable_wrapper .dataTables_paginate { padding: .6rem .9rem 0; }


/* DA map markers */
.da-map-marker {
    width: 20px; height: 20px;
    background: var(--secondary-color);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 0 3px rgba(0,0,0,.5);
    cursor: pointer;
}


@media (max-width: 575px) {
    .da-filter-card { padding: .85rem; }
    #daTable tbody td, #daTable thead th { padding: .6rem .55rem; }
    .da-desc { max-width: 150px; }
}


/* DA panel refresh - calmer approvals UI */
.da-section-intro {
    max-width: 820px;
    color: #5f6f76;
    font-size: .96rem;
    line-height: 1.55;
}

.da-coverage-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 820px;
    background: #EFEDE7;
    border: 1px solid #C2C2C2;
    border-left: 3px solid #ED8B00;
    border-radius: 4px;
    padding: 12px 14px;
    font-family: 'Tahoma', sans-serif;
    font-size: 13px;
    color: #1A171B;
    line-height: 1.5;
}

.da-coverage-note > i {
    color: #ED8B00;
    font-size: 16px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.da-coverage-note strong { color: #005F6E; }


/* == Pro gate: row blur + centered overlay card + filter pill == */
.da-table-wrap { position: relative; }
   /* anchor for the overlay card */
#daTable tbody tr.da-row-locked { cursor: pointer; }

#daTable tbody tr.da-row-locked > td {
    color: #b4b4b4;
    -webkit-text-fill-color: #b4b4b4;
    user-select: none;
}

#daTable tbody tr.da-row-locked > td,
#daTable tbody tr.da-row-locked > td > *,
#daTable tbody tr.da-row-locked > td > * > * {
    filter: blur(6px);
    opacity: .55;
    pointer-events: none;
}

#daTable tbody tr.da-row-locked:hover > td,
#daTable tbody tr.da-row-locked:hover > td > * { opacity: .7; }


/* The single overlay card &mdash; positioned over the locked region, matches the SA3-pro pattern. */
.da-pro-overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #E2E5E7;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 18px 22px 16px;
    text-align: center;
    min-width: 280px;
    max-width: 360px;
    z-index: 5;
    pointer-events: auto;
}

.da-pro-overlay-title {
    font-family: var(--f);
    font-size: 15px;
    font-weight: 700;
    color: #1A171B;
    margin: 0 0 4px;
}

.da-pro-overlay-sub {
    font-family: 'Tahoma', sans-serif;
    font-size: 12.5px;
    color: #555;
    margin: 0 0 12px;
    line-height: 1.45;
}

.da-pro-overlay-btn {
    display: inline-block;
    background: #ED8B00;
    color: #fff;
    font-family: var(--f);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 4px;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
    cursor: pointer;
    border: none;
}

.da-pro-overlay-btn:hover { background: #c57300; transform: translateY(-1px); color: #fff; }


/* Pro pill in filter header &mdash; stays interactive even when card is gated. */
.da-pro-pill {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    background: #ED8B00;
    color: #fff;
    font-family: var(--f);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.da-pro-pill:hover { background: #c57300; color: #fff; transform: translateY(-1px); }

.da-pro-pill i { font-size: 9px; }


/* Filter card looks normal &mdash; no disabled-state visuals. Just signal "click triggers modal".
   The actual interaction-trap is JS (capture-phase listeners).  */
.da-filter-card-pro-gated input,
.da-filter-card-pro-gated select,
.da-filter-card-pro-gated .form-check-input {
    cursor: pointer;
}

#daKpiRow { margin-bottom: 1.15rem; }

.da-kpi-card {
    background: #FDFDFC;
    border-radius: 5px;
    padding: 18px 18px 16px;
    border: 1px solid #C2C2C2;
    border-top: 2px solid #ED8B00;       /* signature orange stripe */
    box-shadow: none;
    transition: box-shadow .2s ease, border-color .2s ease;
    height: 100%;
}

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

.da-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;
}

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

.da-kpi-sub {
    font-family: 'Tahoma', sans-serif;
    font-size: 12px;
    color: #777;
    margin: 10px 0 0;
    line-height: 1.4;
}

/* === Calmer-UI rebrand, aligned with salesTrends2 design system === */
/* Inverted palette &mdash; outer card uses AreaSearch cream so the search row pops,
   inner advanced panel sits on a calmer light surface. */
.da-filter-card {
    background: #EFEDE7;
    border: 1px solid #C2C2C2;
    border-top: 2px solid #ED8B00;       /* AreaSearch "orange stripe" &mdash; same motif as .rent-view-bar */
    border-radius: 5px;
    padding: 14px 16px 12px;
    box-shadow: none;
}

.da-filter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    padding-bottom: 0;
    border-bottom: 0;
}

.da-filter-head-label {
    font-family: var(--f);
    color: #005F6E;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    gap: .5rem;
    display: inline-flex;
    align-items: center;
}

.da-filter-head-label i {
    color: #ED8B00;
    font-size: 11px;
}

.da-filter-head-hint {
    font-family: 'Tahoma', sans-serif;
    color: #777;
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

.da-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 190px) auto auto auto;
    align-items: center;
    gap: .55rem;
}

.da-search-group {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid #C2C2C2;
    border-radius: 2px;
    padding: 0 .8rem;
    min-height: 38px;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.da-search-group:focus-within {
    border-color: #ED8B00;
    box-shadow: 0 0 0 2px rgba(237, 139, 0, .2);
}

.da-search-icon {
    color: #888;
    font-size: 13px;
}

.da-search-group .form-control {
    font-family: 'Tahoma', sans-serif;
    color: #1A171B;
    font-size: 14px;
    padding: .4rem 0;
    font-weight: 500;
}

.da-search-group .form-control::placeholder {
    color: #999;
}

.da-toolbar-select {
    width: 100%;
    min-width: 0;
    background-color: #fff;
    border: 1px solid #C2C2C2;
    color: #1A171B;
    font-family: 'Tahoma', sans-serif;
    font-size: 14px;
    font-weight: 500;
    min-height: 38px;
    border-radius: 2px;
    padding: .35rem 30px .35rem .75rem;
    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='%23005f6e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 12px;
    transition: border-color .15s ease;
}

.da-toolbar-select:hover { border-color: #1ABC9C; }

.da-toolbar-select:focus {
    border-color: #ED8B00;
    box-shadow: 0 0 0 2px rgba(237, 139, 0, .2);
}

.da-filter-toolbar .btn,
.da-adv-toggle {
    min-height: 38px;
    border-radius: 2px;
    font-family: var(--f);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.da-adv-toggle,
.da-icon-btn {
    width: 38px;
    min-width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.da-adv-toggle i,
.da-icon-btn i { margin-right: 0; font-size: 14px; }

/* Orange-magnifier primary search action &mdash; flat & sharp like .rent-mode-btn */
.da-btn-search {
    background: #fff;
    color: #ED8B00;
    border: 1px solid #C2C2C2;
}

.da-btn-search:hover {
    background: #FFF8EE;
    border-color: #ED8B00;
    color: #ED8B00;
}

.da-btn-search:focus,
.da-btn-search:active {
    color: #ED8B00;
    background: #FFF8EE;
    border-color: #ED8B00;
    box-shadow: 0 0 0 2px rgba(237, 139, 0, .2);
}

/* Outline buttons (map, advanced) &mdash; match .rent-mode-btn inactive */
.da-btn-outline,
.da-adv-toggle {
    background: #fff;
    color: #005F6E;
    border: 1px solid #C2C2C2;
}

.da-btn-outline:hover,
.da-adv-toggle:hover {
    background: rgba(26, 188, 156, .10);
    color: #1ABC9C;
    border-color: #1ABC9C;
}

/* Active state &mdash; solid teal, white icon (.rent-mode-btn.is-active) */
.da-btn-outline.active {
    background: #005F6E;
    color: #fff;
    border-color: #005F6E;
}

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

.da-adv-panel {
    margin-top: .85rem;
    padding: 14px 16px;
    border: 1px solid #C2C2C2;
    border-top: 2px solid #ED8B00;
    border-radius: 5px;
    background: #F8F9FA;                 /* light grey &mdash; inverted from outer card cream */
}

.da-adv-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.da-existing-field {
    grid-column: span 2;
}

.da-adv-label {
    font-family: var(--f);
    color: #005F6E;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.da-adv-field .form-control,
.da-adv-field .form-select {
    background-color: #fff;
    border: 1px solid #C2C2C2;
    border-radius: 2px;
    min-height: 36px;
    color: #1A171B;
    font-family: 'Tahoma', sans-serif;
    font-size: 13px;
}

.da-adv-field .form-control:hover,
.da-adv-field .form-select:hover { border-color: #1ABC9C; }

.da-adv-field .form-control:focus,
.da-adv-field .form-select:focus {
    border-color: #ED8B00;
    box-shadow: 0 0 0 2px rgba(237, 139, 0, .2);
}

.da-adv-field .form-control:disabled,
.da-adv-field .form-select:disabled {
    background: #F5F5F5;
    color: #777;
}

.da-date-range { gap: .45rem; }

.da-existing-field .da-adv-check {
    min-height: 36px;
    padding: .35rem .7rem;
    background: #fff;
    border: 1px solid #C2C2C2;
    border-radius: 2px;
    color: #1A171B;
    font-family: 'Tahoma', sans-serif;
    font-size: 13px;
}

.da-existing-field .da-adv-check:hover {
    background: rgba(26, 188, 156, .06);
    border-color: #1ABC9C;
}

.da-existing-field .form-check-input { border-color: #C2C2C2; }

.da-existing-field .form-check-input:checked {
    background-color: #ED8B00;
    border-color: #ED8B00;
}

.da-filter-status {
    font-family: 'Tahoma', sans-serif;
    color: #555;
    font-size: 13px;
    margin-top: .85rem;
    padding-top: .72rem;
    border-top: 1px solid #E2E5E7;
}

.da-filter-status strong {
    color: #005F6E;
    font-weight: 700;
}

.da-filter-status .fa-circle-notch {
    color: #ED8B00;
}

.da-table-wrap {
    border: 1px solid #dce4e7;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

/* Tables &mdash; salesTrends2 motif: Raleway header, orange underline, Tahoma body, soft striping */
#ccTable, #daTable {
    font-family: 'Tahoma', sans-serif;
    font-size: 13px;
    width: 100%;
    margin-bottom: 0;
}

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

#ccTable tbody tr, #daTable tbody tr {
    border-bottom: 1px solid #DDDDDD;
    background: #fff;
}

#ccTable tbody td, #daTable tbody td {
    vertical-align: middle;
    border-top: none;
    padding: 10px 12px;
    line-height: 1.45;
    color: #1A171B;
}

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

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

#daTable tbody tr.shown > * { background: rgba(0, 95, 110, .06); }

/* Right-align numeric columns (Places, Distance, Day Rate, Availability) on the centres table.
   DataTables runs with scrollX, so the VISIBLE header is a clone inside .dataTables_scrollHead
   (outside #ccTable) &mdash; scope to #ccTable_wrapper so both the clone header and the body align.
   Matching padding-right on header + body keeps numbers vertically aligned and clear of sort arrows. */
#ccTable_wrapper td:nth-child(4), #ccTable_wrapper th:nth-child(4),
#ccTable_wrapper td:nth-child(6), #ccTable_wrapper th:nth-child(6),
#ccTable_wrapper td:nth-child(7), #ccTable_wrapper th:nth-child(7),
#ccTable_wrapper td:nth-child(8), #ccTable_wrapper th:nth-child(8) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#ccTable_wrapper thead th:nth-child(4), #ccTable_wrapper thead th:nth-child(6),
#ccTable_wrapper thead th:nth-child(7), #ccTable_wrapper thead th:nth-child(8),
#ccTable_wrapper tbody td:nth-child(4), #ccTable_wrapper tbody td:nth-child(6),
#ccTable_wrapper tbody td:nth-child(7), #ccTable_wrapper tbody td:nth-child(8) {
    padding-right: 24px;
}

/* Centres-table link styling &mdash; match salesTrends2 cell links */
#ccTable a {
    color: #14799f;
    font-weight: 600;
    text-decoration: none;
}

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


/* Branded hover tooltips for the centres-table headers. The DataTables scroll-head clone sits in
   an overflow:hidden container, so the tip is appended to <body> (see script) to avoid clipping;
   the native title="" on each <th> is the no-JS fallback. */
.cc-header-tip {
    position: fixed;
    z-index: 100000;
    max-width: 260px;
    background: #17283A;
    color: #fff;
    font-family: 'Tahoma', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    padding: 8px 11px;
    border-radius: 8px;
    border-top: 2px solid #ED8B00;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}

.cc-header-tip.show { opacity: 1; }

#ccTable_wrapper .dataTables_scrollHead th[title],
#ccTable_wrapper .dataTables_scrollHead th[data-tip],
#ccTable_wrapper thead th[title],
#ccTable_wrapper thead th[data-tip] { cursor: help; }


/* DataTables chrome (search input, page-length select, pagination) &mdash; unify with brand */
#ccTable_wrapper, #daTable_wrapper {
    font-family: 'Tahoma', sans-serif;
    font-size: 13px;
}

#ccTable_wrapper .dataTables_length select,
#ccTable_wrapper .dataTables_filter input {
    border: 1px solid #C2C2C2;
    border-radius: 2px;
    padding: 4px 8px;
    font-size: 13px;
    color: #1A171B;
    background: #fff;
}

#ccTable_wrapper .dataTables_filter input:focus,
#ccTable_wrapper .dataTables_length select:focus {
    border-color: #ED8B00;
    box-shadow: 0 0 0 2px rgba(237, 139, 0, .2);
    outline: none;
}

#ccTable_wrapper .dataTables_info,
#daTable_wrapper .dataTables_info {
    color: #555;
    font-size: 12px;
    padding-top: 10px;
}

#ccTable_wrapper .dataTables_paginate .paginate_button,
#daTable_wrapper .dataTables_paginate .paginate_button {
    border-radius: 2px;
    font-family: 'Tahoma', sans-serif;
    font-size: 12px;
    color: #005F6E;
    border: 1px solid #C2C2C2;
    margin: 0 2px;
    background: #fff;
}

#ccTable_wrapper .dataTables_paginate .paginate_button:hover,
#daTable_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(26, 188, 156, .10);
    color: #1ABC9C;
    border-color: #1ABC9C;
}

#ccTable_wrapper .dataTables_paginate .paginate_button.current,
#daTable_wrapper .dataTables_paginate .paginate_button.current {
    background: #005F6E;
    color: #fff;
    border-color: #005F6E;
}

#ccTable_wrapper .dataTables_paginate .paginate_button.disabled,
#daTable_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #aaa;
    background: #fff;
    border-color: #E2E5E7;
    cursor: default;
}

.da-addr {
    color: #006878;
    font-weight: 700;
}

.da-da-number {
    color: #87949a;
}

.da-desc {
    color: #536268;
}

.da-existing {
    background: #f7eef2;
    color: #7b1c3e;
    border-radius: 4px;
    font-weight: 700;
}

.da-badge {
    border-radius: 4px;
    border: 1px solid transparent;
}

.da-badge-approved {
    background: #e8f6f2;
    color: #13745f;
    border-color: #c8e8df;
}

.da-badge-pending {
    background: #fff4df;
    color: #a35d00;
    border-color: #f3d79e;
}

.da-badge-rejected {
    background: #f7eaf0;
    color: var(--secondary-color);
    border-color: #ebcbd8;
}

.da-badge-neutral {
    background: #eef2f3;
    color: #59686e;
    border-color: #dde6e8;
}

.da-detail {
    background: #EFEDE7;                 /* AreaSearch cream &mdash; matches .da-adv-panel */
    border-top: 1px solid #C2C2C2;
    padding: 18px 20px;
}

.da-detail-grid > div {
    background: #fff;
    border: 1px solid #C2C2C2;
    border-radius: 2px;
    padding: 8px 10px;
}

.da-detail-k {
    font-family: var(--f);
    color: #005F6E;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.da-detail-v {
    font-family: 'Tahoma', sans-serif;
    color: #1A171B;
    font-size: 13px;
}

.da-detail-notes {
    background: #fff;
    border: 1px solid #C2C2C2;
    border-left: 3px solid #ED8B00;       /* orange accent &mdash; same as .rent-scope-note */
    border-radius: 2px;
    padding: 10px 12px;
    margin-top: 10px;
}

.da-detail-notes b { color: #005F6E; }

.da-detail-siblings {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #C2C2C2;
}

.da-detail-siblings h6 {
    font-family: var(--f);
    color: #005F6E;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.da-sib-item {
    background: #fff;
    border: 1px solid #C2C2C2;
    border-radius: 2px;
    font-family: 'Tahoma', sans-serif;
}


@media (max-width: 991.98px) {
    .da-filter-toolbar {
        grid-template-columns: 1fr 1fr;
    }
    .da-search-group {
        grid-column: 1 / -1;
    }
    .da-adv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .da-filter-card {
        padding: .85rem;
    }
    .da-filter-toolbar {
        grid-template-columns: 1fr;
    }
    .da-filter-toolbar .btn,
    .da-toolbar-select,
    .da-adv-controls {
        width: 100%;
    }
    .da-adv-toggle {
        flex: 0 0 42px;
        width: 42px;
    }
    .da-adv-grid {
        grid-template-columns: 1fr;
    }
    .da-existing-field {
        grid-column: auto;
    }
}


/* ============================================
   CTA / SEARCH &mdash; Find & Assess a Centre
   (ported from incolour/childcare.php)
   ============================================ */
.cta-block {
    --cta-radius-lg: 16px;
    --cta-radius: 8px;
    --cta-accent-vivid: #06b6d4;
    --cta-signal: #ED8B00;
    --cta-ink: #0a1628;
    background: linear-gradient(135deg, #0b1a2e 0%, #132f4c 55%, #0d3b4f 100%);
    border-radius: var(--cta-radius-lg);
    padding: 4rem 3.5rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-block::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -15%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6,182,212,0.12), transparent 65%);
    pointer-events: none;
}

.cta-block::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237,139,0,0.08), transparent 65%);
    pointer-events: none;
}

.cta-image-bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    max-width: 600px;
    background-image: url('/images/analysis_target_cc.webp');
    background-size: cover;
    background-position: center left;
    mask-image: linear-gradient(to right, transparent 0%, black 60%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60%);
    opacity: 0.85;
    z-index: 0;
    pointer-events: none;
}

.cta-content-inner {
    position: relative;
    z-index: 1;
}

.cta-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cta-title-row h3 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
}

.cta-title-row .cta-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(6,182,212,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--cta-accent-vivid);
    flex-shrink: 0;
}

.cta-subtitle {
    color: rgba(255,255,255,0.55);
    font-size: 1.1rem;
    margin: 0 0 2.5rem 0;
    max-width: 550px;
    line-height: 1.5;
}

.cta-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 2.5rem;
    max-width: 540px;
}

.cta-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    text-align: center;
}

.cta-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 1px;
    background: rgba(255,255,255,0.15);
}

.cta-step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}

.cta-step:hover .cta-step-num {
    background: rgba(6,182,212,0.2);
    border-color: var(--cta-accent-vivid);
    color: #fff;
}

.cta-step-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    line-height: 1.35;
}

.cta-how-link {
    display: inline;
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.25s ease;
    margin-bottom: 2rem;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    font-family: var(--f);
}

.cta-how-link:hover {
    color: #fff;
    text-decoration: underline;
}

.cta-how-link i { font-size: 0.8rem; }

.search-mode-toggle {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 0.85rem;
    border-radius: 50px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 3px;
    gap: 2px;
}

.smt-btn {
    padding: 0.6rem 1.6rem;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-family: var(--f);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
    letter-spacing: 0.2px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.smt-btn i {
    font-size: 0.82rem;
    transition: color 0.2s;
}

.smt-btn:not(.active):hover {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.05);
}

.smt-btn.active {
    background: rgba(6,182,212,0.18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(6,182,212,0.3);
}

.smt-btn.active i { color: var(--cta-accent-vivid); }

.cta-block .cta-search {
    display: flex;
    max-width: 550px;
    border-radius: var(--cta-radius);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.cta-block .cta-search input {
    flex: 1;
    border: none;
    border-radius: 0;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-family: var(--f);
    outline: none;
    background: rgba(255,255,255,0.95);
    color: var(--cta-ink);
}

.cta-block .cta-search input::placeholder { color: #94a3b8; }

.cta-block .cta-search input:focus { background: #fff; }

.cta-block .cta-search button {
    background: var(--cta-signal);
    border: none;
    border-radius: 0;
    padding: 1rem 1.5rem;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--f);
    transition: all 0.2s;
    font-size: 0.95rem;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.cta-block .cta-search button:hover { background: #d97706; }


@media (max-width: 768px) {
    .cta-block { padding: 2rem 1.5rem; }
    .cta-steps { gap: 0.25rem; }
    .cta-step:not(:last-child)::after { display: none; }
    .cta-block .cta-search { flex-direction: column; border-radius: 0 0 var(--cta-radius) var(--cta-radius); }
    .cta-block .cta-search button { padding: 0.85rem; }
    .cta-image-bg { display: none; }
}


/* ============================================
   SEARCH RESULTS MODAL  (ported from incolour/childcare.php)
   ============================================ */
#cc-search-modal {
    --ccm-accent-vivid: #06b6d4;
    --ccm-signal: #ED8B00;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 92%;
    max-width: 900px;
    max-height: 80vh;
    background: rgba(10, 15, 25, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

#cc-search-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

#cc-search-modal .sm-header {
    padding: 16px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#cc-search-modal .sm-header h4 {
    margin: 0;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

#cc-search-modal .sm-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 8px 14px;
    margin-right: 12px;
    transition: border-color 0.2s, background 0.2s;
}

#cc-search-modal .sm-search-wrap:focus-within {
    border-color: var(--ccm-accent-vivid);
    background: rgba(6,182,212,0.06);
}

#cc-search-modal .sm-search-icon {
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    flex-shrink: 0;
}

#cc-search-modal .sm-search-wrap:focus-within .sm-search-icon {
    color: var(--ccm-accent-vivid);
}

#cc-search-modal .sm-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    font-family: var(--f);
    padding: 2px 0;
    min-width: 0;
}

#cc-search-modal .sm-search-input::placeholder { color: rgba(255,255,255,0.35); }

#cc-search-modal .sm-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px; width: 14px;
    background: rgba(255,255,255,0.3);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>") no-repeat center / contain;
    cursor: pointer;
}

#cc-search-modal .sm-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

#cc-search-modal .sm-close:hover { color: #fff; }

#cc-search-modal .sm-body {
    padding: 15px 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(80vh - 60px);
}

#cc-search-modal .sm-body .results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    margin: -15px -20px 15px -20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 95, 110, 0.1);
}

#cc-search-modal .results-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ccm-accent-vivid);
    font-weight: 500;
}

#cc-search-modal .results-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

#cc-search-modal .result-card {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

#cc-search-modal .result-card:hover { background: rgba(6, 182, 212, 0.08); }

#cc-search-modal .result-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

#cc-search-modal .result-location {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s;
}

#cc-search-modal .result-location:hover { color: var(--ccm-accent-vivid); }

#cc-search-modal .result-location-state {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin-left: 8px;
}

#cc-search-modal .result-type-badge {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    position: relative;
    cursor: help;
}

#cc-search-modal .badge-sa2 {
    background: rgba(110, 15, 49, 0.2);
    color: #c9426a;
    border: 1px solid rgba(110, 15, 49, 0.4);
}

#cc-search-modal .badge-sal,
#cc-search-modal .badge-ssc {
    background: rgba(6, 182, 212, 0.15);
    color: var(--ccm-accent-vivid);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

#cc-search-modal .badge-address {
    background: rgba(237, 139, 0, 0.15);
    color: var(--ccm-signal);
    border: 1px solid rgba(237, 139, 0, 0.3);
}

#cc-search-modal .badge-school {
    background: rgba(37,99,235,0.15);
    color: #60a5fa;
    border: 1px solid rgba(37,99,235,0.3);
}

#cc-search-modal .badge-cc {
    background: rgba(237,139,0,0.15);
    color: var(--ccm-signal);
    border: 1px solid rgba(237,139,0,0.3);
}

#cc-search-modal .centre-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    margin: 4px 0 6px;
}

#cc-search-modal .centre-meta i { margin-right: 3px; font-size: 0.7rem; }

#cc-search-modal .result-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 0.1rem;
}

#cc-search-modal .s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: 1.5px solid transparent;
    white-space: nowrap;
    min-height: 32px;
}

#cc-search-modal .s-btn i { font-size: 0.7rem; }

#cc-search-modal .s-btn-view { background: #f0fdfa; color: #005F6E; border-color: #99f6e4; }

#cc-search-modal .s-btn-view:hover { background: #005F6E; color: #fff; border-color: #005F6E; box-shadow: 0 2px 8px rgba(0, 95, 110, 0.3); }

#cc-search-modal .s-btn-report { background: #fff7ed; color: #b45309; border-color: #fed7aa; }

#cc-search-modal .s-btn-report:hover { background: #ED8B00; color: #fff; border-color: #ED8B00; }

#cc-search-modal .s-btn-childcare { background: #fdf2f8; color: #9d174d; border-color: #fbcfe8; }

#cc-search-modal .s-btn-childcare:hover { background: #db2777; color: #fff; border-color: #db2777; }

#cc-search-modal .s-btn-custom { background: linear-gradient(135deg, #005F6E 0%, #00838f 100%); color: #fff; }

#cc-search-modal .s-btn-custom:hover { background: linear-gradient(135deg, #00838f 0%, #1ABC9C 100%); box-shadow: 0 2px 10px rgba(0, 95, 110, 0.35); }

#cc-search-modal .s-btn-catchment { background: linear-gradient(135deg, #6e0f31 0%, #8b1a3d 100%); color: #fff; }

#cc-search-modal .s-btn-catchment:hover { background: linear-gradient(135deg, #8b1a3d 0%, #a32050 100%); box-shadow: 0 2px 10px rgba(110,15,49,0.35); }

#cc-search-modal .s-btn-map { background: #374151; color: #d1d5db; border-color: #4b5563; }

#cc-search-modal .s-btn-map:hover { background: #4b5563; color: #fff; }

#cc-search-modal .s-btn-disabled { background: #f8fafc; color: #cbd5e1; border-color: #e2e8f0; cursor: not-allowed; pointer-events: none; }

#cc-search-modal .search-loading {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
}

#cc-search-modal .search-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--ccm-accent-vivid);
    border-radius: 50%;
    animation: ccSpin 0.8s linear infinite;
    margin: 0 auto 12px;
}

#cc-search-modal .search-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

#cc-search-modal .search-empty-state i {
    font-size: 32px;
    color: var(--ccm-accent-vivid);
    margin-bottom: 12px;
    display: block;
}

#cc-search-modal .search-empty-state h3 {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 8px 0;
}

#cc-search-modal .search-empty-state p {
    font-size: 13px;
    margin: 0;
}

#cc-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

#cc-search-overlay.open {
    opacity: 1;
    pointer-events: auto;
}


/* ============================================================
   CHILDCARE V2 â&mdash; SHADCN-INSPIRED MAIN BODY
   Scope: .cc-main only. Do not remove this scope.
   Neutral tokens mirror web/src/index.css; brand colours provide
   the primary, focus and signal accents.
   ============================================================ */
.cc-main {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: #14799f;
    --radius: 0.4rem;

    /* AreaSearch brand bridge */
    --primary: #005f6e;
    --primary-foreground: #fafafa;
    --brand-link: #14799f;
    --brand-signal: #ed8b00;
    --brand-plum: #6e0f31;

    --radius-sm: calc(var(--radius) * 0.6);
    --radius-md: calc(var(--radius) * 0.8);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) * 1.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.07);

    color: var(--foreground);
    font-family: var(--f);
}


.cc-main > section {
    scroll-margin-top: 88px;
}


.cc-main .cc-section {
    margin-bottom: 2.5rem;
    padding: 0;
}


.cc-main .cc-section--metrics,
.cc-main .cc-section--approvals,
.cc-main .cc-section--more {
    padding-top: 2.25rem;
    border-top: 1px solid var(--border);
}


.cc-main .cc-section-heading {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}


.cc-main .cc-section-heading::before {
    display: none;
}


.cc-main .cc-eyebrow,
.cc-main .cc-section-heading .as-eyebrow {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.cc-main .cc-section-title,
.cc-main .cc-section-heading .as-title {
    display: block;
    margin: 0;
    color: var(--foreground);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.025em;
}


.cc-main .cc-section-description {
    max-width: 46rem;
    margin: 0.5rem 0 1.25rem;
    color: var(--muted-foreground);
    font-size: 0.925rem;
    line-height: 1.6;
}


/* Shared shadcn-like surfaces */
.cc-main .map-container,
.cc-main .table-container,
.cc-main .da-table-wrap,
.cc-main .cc-panel,
.cc-main .cc-faq-card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


.cc-main .map-container {
    position: relative;
    overflow: visible; /* Required by map layer controls */
    box-shadow: var(--shadow-card);
}


.cc-main #salesMap {
    border-radius: var(--radius-xl);
}


.cc-main .map-container:focus-within {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(20, 121, 159, 0.16);
}


.cc-main .map-controls-card,
.cc-main .map-controls-card.p-4 {
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


.cc-main .cc-field-label,
.cc-main .map-controls-card .form-label {
    margin-bottom: 0.5rem;
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}


.cc-main .form-control,
.cc-main .form-select,
.cc-main .bootstrap-select > .dropdown-toggle {
    min-height: 40px;
    background-color: var(--background);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}


.cc-main .form-control:focus,
.cc-main .form-select:focus,
.cc-main .bootstrap-select > .dropdown-toggle:focus,
.cc-main .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(20, 121, 159, 0.16);
    outline: none;
}


.cc-main :where(a, button, input, select, summary):focus-visible {
    outline: 3px solid rgba(20, 121, 159, 0.28);
    outline-offset: 2px;
}


/* Centres table */
.cc-main .table-container,
.cc-main .da-table-wrap {
    overflow: hidden;
}


.cc-main #ccTable,
.cc-main #daTable {
    margin-bottom: 0;
    color: var(--foreground);
    font-family: inherit;
    font-size: 0.8125rem;
}


.cc-main #ccTable thead th,
.cc-main #daTable thead th,
.cc-main #ccTable_wrapper .dataTables_scrollHead th {
    padding: 0.75rem;
    background: var(--muted);
    color: var(--foreground);
    border-top: 0;
    border-bottom: 1px solid var(--border);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.cc-main #ccTable tbody td,
.cc-main #daTable tbody td {
    padding: 0.75rem;
    color: var(--foreground);
    border-color: var(--border);
}


.cc-main #ccTable tbody tr,
.cc-main #daTable tbody tr {
    background: var(--card);
}


.cc-main #ccTable tbody tr:hover,
.cc-main #daTable tbody tr:hover {
    transform: none;
    box-shadow: none;
}


.cc-main #ccTable tbody tr:hover > *,
.cc-main #daTable tbody tr:hover > * {
    background: var(--accent);
}


.cc-main #ccTable_wrapper,
.cc-main #daTable_wrapper {
    color: var(--muted-foreground);
    font-family: inherit;
}


.cc-main .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
}


.cc-main .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}


.cc-main .cc-helper,
.cc-main .source {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
}


/* Key metrics */
.cc-main .cc-scope-comparison {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
}


.cc-main .cc-scope-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-size: 0.8125rem;
    font-weight: 600;
}


.cc-main .cc-scope-badge--local {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}


.cc-main .cc-scope-separator {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}


.cc-main .metric-card,
.cc-main .metric-card-cream {
    min-height: 188px;
    height: 100%;
    padding: 1.25rem;
    text-align: left;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}


.cc-main .metric-card-cream {
    background: var(--muted);
}


.cc-main .metric-card:hover,
.cc-main .metric-card-cream:hover {
    transform: none;
    border-color: rgba(20, 121, 159, 0.35);
    box-shadow: var(--shadow-card);
}


.cc-main .metric-icon {
    width: 44px;
    height: 44px;
    margin: 0 0 0.875rem;
    padding: 9px;
    background: rgba(0, 95, 110, 0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}


.cc-main .metric-card-cream .metric-icon {
    background: var(--card);
}


.cc-main .metric-icon img {
    display: block;
}


.cc-main .metric-label {
    min-height: 2.5em;
    margin-bottom: 0.35rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
}


.cc-main .metric-value-local {
    color: var(--primary);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


.cc-main .metric-value-regional {
    margin-top: 0.65rem;
    padding-top: 0.45rem;
    color: var(--muted-foreground);
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


/* Approvals */
.cc-main .da-section-intro {
    color: var(--muted-foreground);
}


.cc-main .cc-section--approvals .cc-section-heading {
    margin-bottom: 0;
}


/* Approvals header: one paper surface for copy + morph (Sol ship-with-tweaks; Opus YES-with-tweaks) */
.cc-main .cc-approvals-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
    padding: 1.25rem 1.5rem 1.75rem;
    /* Opus: square bottom so soft fade meets white section cleanly */
    border-radius: 0.4rem 0.4rem 0 0;
    background: linear-gradient(
        to bottom,
        #F4EFE4 0,
        #F4EFE4 calc(100% - 1.75rem),
        transparent 100%
    );
}

.cc-main .cc-approvals-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-main .cc-approvals-head .cc-section-heading {
    margin-bottom: 0.5rem;
}

.cc-main .cc-approvals-head .da-section-intro {
    max-width: 68ch;
    margin-bottom: 0;
}

.cc-main .cc-approvals-anim {
    flex: 0 0 auto;
    height: 160px;
    width: auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    pointer-events: none;
    /* Opus: soft side feather so baked frame cream blends into plate */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.cc-main .cc-approvals-anim canvas,
.cc-main .cc-approvals-anim img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1100px) {
    .cc-main .cc-approvals-anim { height: 140px; }
}

@media (max-width: 900px) {
    /* Opus: drop plate with the anim so title is not a beige box alone */
    .cc-main .cc-approvals-head {
        padding: 0;
        margin-bottom: 1rem;
        border-radius: 0;
        background: none;
    }
    .cc-main .cc-approvals-anim { display: none; }
}

@media print {
    .cc-main .cc-approvals-head {
        padding: 0;
        background: none;
        border-radius: 0;
    }
    .cc-main .cc-approvals-anim { display: none; }
}



.cc-main .da-coverage-note {
    gap: 0.75rem;
    padding: 1rem;
    background: var(--muted);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-signal);
    border-radius: var(--radius-lg);
    box-shadow: none;
}


.cc-main .da-kpi-card {
    padding: 1.25rem;
    min-height: 132px;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


.cc-main .da-kpi-card:hover {
    border-color: rgba(20, 121, 159, 0.35);
    box-shadow: var(--shadow-card);
}


.cc-main .da-kpi-label {
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}


.cc-main .da-kpi-value {
    color: var(--primary);
    font-family: inherit;
    font-weight: 700;
}


.cc-main .da-kpi-sub {
    color: var(--muted-foreground);
    font-family: inherit;
    margin-top: 0.6rem;
}


.cc-main .da-filter-card {
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


.cc-main .da-filter-head-label,
.cc-main .da-adv-label {
    color: var(--foreground);
    font-family: inherit;
    letter-spacing: 0.04em;
}


.cc-main .da-filter-head {
    align-items: center;
    margin-bottom: 1rem;
}


.cc-main .da-filter-head-hint,
.cc-main .da-filter-status {
    color: var(--muted-foreground);
    font-family: inherit;
}


.cc-main .da-search-group {
    min-height: 40px;
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
}


.cc-main .da-search-group:focus-within {
    border-color: var(--ring);
    background: var(--background);
    box-shadow: 0 0 0 3px rgba(20, 121, 159, 0.16);
}


.cc-main .da-toolbar-select {
    min-height: 40px;
    border-color: var(--input);
    border-radius: var(--radius-md);
}


.cc-main .da-toolbar-select:focus {
    border-color: var(--ring);
}


.cc-main .da-filter-status {
    margin-bottom: 0;
}


.cc-main .da-table-wrap {
    border-color: var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


.cc-main .da-adv-panel {
    background: var(--muted);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg);
}


.cc-main .da-filter-toolbar .btn,
.cc-main .da-adv-toggle,
.cc-main .da-notify-cta {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}


.cc-main .da-btn-search,
.cc-main .da-notify-cta {
    background: var(--primary);
    color: var(--primary-foreground);
    border: 1px solid var(--primary);
}


.cc-main .da-btn-outline,
.cc-main .da-adv-toggle {
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
}


.cc-main .da-btn-outline:hover,
.cc-main .da-adv-toggle:hover {
    background: var(--accent);
    color: var(--accent-foreground);
    border-color: var(--border);
}



/* Approvals: Opus summary when locked; full legacy register in-place when Pro */

/* Legacy filter/table: stay in DOM for JS; only visible when Pro (no [hidden]) */
.cc-main .cc-da-legacy[hidden] { display: none; }

.cc-main .cc-da-legacy:not([hidden]) { display: block; }


/* Demote Notify so Approvals unlock CTA stays the primary in the section */
.cc-main .da-notify-cta.cc-btn--ghost {
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.cc-main .da-notify-cta.cc-btn--ghost:hover {
    background: var(--accent);
    color: var(--accent-foreground);
    border-color: var(--border);
}

.cc-main .da-notify-cta.cc-btn--ghost i { color: var(--brand-signal); }


/* Recent projects */
.cc-main .cc-approvals-recent { padding: 1.25rem; }

.cc-main .cc-approvals-recent-title {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.cc-main .cc-recent-list { margin: 0; padding: 0; list-style: none; }

.cc-main .cc-recent-item { padding: 0.85rem 0; border-top: 1px solid var(--border); }

.cc-main .cc-recent-item:first-child { padding-top: 0; border-top: 0; }

.cc-main .cc-recent-item:last-child  { padding-bottom: 0; }


.cc-main .cc-recent-head {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem; margin-bottom: 0.3rem;
}

.cc-main .cc-recent-addr {
    font-size: 0.95rem; font-weight: 600; color: var(--foreground);
}

.cc-main .cc-recent-maplink {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.65rem;
    margin: 0; padding: 0; border: 0; background: transparent;
    font: inherit; text-align: left; cursor: pointer; color: inherit;
}

.cc-main .cc-recent-maplink .cc-recent-addr {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}

.cc-main .cc-recent-maplink:hover .cc-recent-addr,
.cc-main .cc-recent-maplink:focus-visible .cc-recent-addr {
    color: var(--brand-signal, var(--primary));
}

.cc-main .cc-recent-maplink:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 2px;
}

.cc-main .cc-recent-mapcue {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--primary);
    white-space: nowrap;
}

.cc-main .cc-recent-mapcue i { font-size: 0.7rem; }

.cc-main .cc-recent-blurb {
    margin: 0 0 0.4rem;
    font-size: 0.875rem; line-height: 1.45; color: var(--muted-foreground);
}

.cc-main .cc-recent-meta {
    display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem;
    font-size: 0.8125rem; color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}


/* Status = semantic bucket, never a raw council string */
.cc-main .cc-recent-status {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--secondary);
    font-size: 0.75rem; font-weight: 600;
}

.cc-main .cc-recent-status--approved  { color: #0F8870; border-color: rgba(15,136,112,.35); background: rgba(15,136,112,.08); }

.cc-main .cc-recent-status--assessing { color: #B36800; border-color: rgba(179,104,0,.35);  background: rgba(179,104,0,.08); }

.cc-main .cc-recent-status--refused   { color: #6E0F31; border-color: rgba(110,15,49,.30);  background: rgba(110,15,49,.07); }


/* Unlock CTA (Pro / login gate &mdash; in-place) */
.cc-main .cc-approvals-cta {
    padding: 1.25rem;
    border-left: 3px solid var(--primary);
}

.cc-main .cc-cta-btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    min-height: 44px;
    padding: 0.65rem 1.15rem;
    background: var(--primary);
    color: var(--primary-foreground);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md, 0.4rem);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    font-size: 0.95rem; font-weight: 600; line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.cc-main .cc-cta-btn:hover,
.cc-main .cc-cta-btn:focus-visible {
    color: var(--primary-foreground);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 95, 110, .25);
}

.cc-main .cc-cta-note {
    max-width: 46rem;
    margin: 0.85rem 0 0;
    font-size: 0.875rem; line-height: 1.5;
    color: var(--muted-foreground);
}


@media (max-width: 767.98px) {
    .cc-main .cc-approvals-recent,
    .cc-main .cc-approvals-cta { padding: 1rem; }
    .cc-main .cc-cta-btn { width: 100%; justify-content: center; }
}


/* Embedded banners */
.cc-main .cc-banner-shell {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}


.cc-main .cc-banner-shell iframe {
    border-radius: var(--radius-xl);
    box-shadow: none;
}


/* FAQ */
.cc-main #faq {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


.cc-main #faq > .as-faq-heading {
    color: var(--foreground);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 650;
    margin: 0 0 0.75rem;
}


.cc-main .as-faq-item,
.cc-main .as-faq-item:first-child {
    border-color: var(--border);
}


.cc-main .as-faq-item > summary {
    color: var(--foreground);
    font-family: inherit;
    font-weight: 600;
}


.cc-main .as-faq-item > summary:hover,
.cc-main .as-faq-item[open] > summary {
    color: var(--primary);
}


.cc-main .as-faq-answer {
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: 0.875rem;
}


/* More */
.cc-main .cta-block {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}


.cc-main .cc-more-block {
    width: 100%;
}


.cc-main .cc-section--more > .cc-section-heading {
    margin-top: 2.25rem;
}


.cc-main #more #linksContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


.cc-main #more #linksContainer a {
    padding: 0.5rem 0.75rem;
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
}


.cc-main #more #linksContainer a:hover {
    background: var(--accent);
    color: var(--primary);
    border-color: var(--ring);
}


/* Nearby suburbs (17 Oct 2026): the PHP prints Bootstrap rows of col-sm-2 cells, and inside the flex card above they shrank to fit their own text and left half the card empty.
   One tidy wrapping grid of plain links now (the links keep the plain-text look set by .nearby-link). */
.cc-main #more #linksContainer { display: block; }

.cc-main #more #linksContainer .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.125rem 1rem; width: 100%; margin: 0; }

.cc-main #more #linksContainer .row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; margin: 0; }

.cc-main #more #linksContainer .row + .row { margin-top: 0.25rem; }


/* Click-to-load map (17 Oct 2026): Mapbox GL is not fetched and no map is created until the visitor asks. The placeholder is the suburb's own picture from the image bucket. */
.cc-map-gate { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; overflow: hidden; border-radius: var(--radius-xl, 12px); background: #0d1826; }

.cc-map-gate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; opacity: 0; transition: opacity .7s ease; }

.cc-map-gate.is-ready .cc-map-gate__img { opacity: .92; }

.cc-map-gate__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.cc-gate-shape { fill: rgba(26,188,156,.08); stroke: #1abc9c; stroke-opacity: .9; stroke-width: 5; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(26,188,156,.55)); }

@media (prefers-reduced-motion: no-preference) {
    .cc-gate-shape { animation: cc-gate-draw 3.2s ease both; animation-play-state: paused; }
    .cc-map-gate.is-ready.is-seen .cc-gate-shape { animation-play-state: running; }   /* once the picture is in AND the placeholder is on screen */
}

.cc-map-gate__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,17,25,.15), rgba(10,17,25,.55)); }

.cc-map-gate__btn { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.5rem; border: 0; border-radius: 999px; background: #ED8B00; color: #0b1520; font: 700 1rem/1.2 inherit; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.35); }

.cc-map-gate__btn:hover, .cc-map-gate__btn:focus-visible { box-shadow: 0 0 0 4px rgba(237,139,0,.35), 0 6px 22px rgba(0,0,0,.35); }

.cc-map-gate__note { position: relative; margin: 0; color: #e6edf3; font-size: .85rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

.cc-map-gate.is-loading .cc-map-gate__btn { opacity: .75; cursor: progress; }

.cc-map-gate.is-gone { display: none; }


.cc-main .cc-area-search {
    border: 1px solid var(--input);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


.cc-main .cc-area-search:focus-within {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(20, 121, 159, 0.16);
}


.cc-main #demoLinks {
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-left: 3px solid var(--brand-signal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}


.cc-main #demoLinks h5,
.cc-main #demoLinks h5 strong {
    color: var(--foreground);
    font-family: inherit;
}


.cc-main #demoLinks p {
    color: var(--muted-foreground);
    font-family: inherit;
}


@media (max-width: 767.98px) {
    .cc-main .cc-section {
        margin-bottom: 2rem;
    }

    .cc-main .cc-section--metrics,
    .cc-main .cc-section--approvals,
    .cc-main .cc-section--more {
        padding-top: 1.75rem;
    }

    .cc-main .cc-section-heading {
        margin-bottom: 1rem;
    }

    .cc-main #salesMap {
        height: 420px;
    }

    .cc-main .map-controls-card,
    .cc-main .map-controls-card.p-4,
    .cc-main .da-filter-card {
        padding: 1rem;
    }

    .cc-main .metric-card,
    .cc-main .metric-card-cream {
        min-height: 174px;
        padding: 1rem;
    }

    .cc-main #faq {
        padding: 1.1rem;
    }

    .cc-main .da-kpi-card {
        min-height: 122px;
        padding: 1rem;
    }

    .cc-main .da-filter-toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cc-main .da-search-group,
    .cc-main .da-toolbar-select {
        grid-column: 1 / -1;
    }

    .cc-main .da-filter-toolbar .btn,
    .cc-main .da-adv-toggle {
        width: 100%;
        min-height: 40px;
    }

    .cc-main #more #linksContainer {
        padding: 1rem;
    }

    .cc-main .cta-block {
        padding: 2rem 1.25rem;
    }
}


/* ============================================================
   OPUS 5.5 blandness pass &mdash; additive under .cc-main only
   Items: warm tokens, teal eyebrows, metric depth, metrics band
   Skipped: gradient separators (item 5), table/map structural
   ============================================================ */
.cc-main {
    --muted: oklch(0.974 0.006 85);
    --accent: oklch(0.972 0.006 85);
    --secondary: oklch(0.972 0.006 85);
    --border: oklch(0.92 0.006 85);
    --input: oklch(0.92 0.006 85);
}


.cc-main .cc-eyebrow,
.cc-main .cc-section-heading .as-eyebrow {
    color: var(--primary);
}

.cc-main .cc-eyebrow::before,
.cc-main .cc-section-heading .as-eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 2px;
    margin-right: 0.5rem;
    vertical-align: middle;
    background: var(--primary);
}


.cc-main .metric-card,
.cc-main .metric-card-cream {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(0, 95, 110, 0.10);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 40%);
}

.cc-main .metric-icon {
    background: rgba(237, 139, 0, 0.07);
}

.cc-main .metric-card-cream .metric-icon {
    background: rgba(237, 139, 0, 0.07);
}

.cc-main .metric-value-regional::before {
    content: "vs ";
}


.cc-main .cc-section--metrics {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
}

.cc-main .cc-section--metrics .metric-card-cream {
    background-color: var(--card);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 40%);
}


@media (max-width: 767.98px) {
    .cc-main .cc-section--metrics {
        padding: 1.25rem 0.75rem;
    }
}



/* ============================================================
   Metrics spice pass - additive under .cc-main only
   Key Metrics band presence + card depth/hover; radius already
   tightened via --radius: 0.4rem above.
   ============================================================ */
.cc-main .cc-section--metrics {
    border-top: none;
    border-left: 4px solid var(--primary);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06), 0 8px 24px -10px rgba(0, 95, 110, 0.14);
}


.cc-main .cc-section--metrics .metric-card,
.cc-main .cc-section--metrics .metric-card-cream {
    border-left: 3px solid var(--primary);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.05),
        0 4px 12px -6px rgba(0, 95, 110, 0.12),
        0 10px 20px -12px rgba(16, 24, 40, 0.08);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}


/* First-row (non-cream) cards: hair more emphasis */
.cc-main .cc-section--metrics .metric-card:not(.metric-card-cream) {
    border-left-color: var(--primary);
    box-shadow:
        0 1px 3px rgba(16, 24, 40, 0.06),
        0 6px 14px -6px rgba(0, 95, 110, 0.16),
        0 12px 22px -12px rgba(16, 24, 40, 0.10);
}


.cc-main .cc-section--metrics .metric-card:hover,
.cc-main .cc-section--metrics .metric-card-cream:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 121, 159, 0.55);
    border-left-color: var(--brand-link);
    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.06),
        0 8px 18px -6px rgba(0, 95, 110, 0.18),
        0 14px 28px -12px rgba(16, 24, 40, 0.12);
}


.cc-main .cc-section--metrics .metric-value-local {
    font-size: clamp(1.7rem, 3.1vw, 2.2rem);
    letter-spacing: -0.02em;
}


.cc-main .cc-section--metrics .metric-icon {
    background: rgba(237, 139, 0, 0.11);
    border-color: rgba(237, 139, 0, 0.28);
}


.cc-main .cc-section--metrics .metric-card-cream .metric-icon {
    background: rgba(237, 139, 0, 0.11);
    border-color: rgba(237, 139, 0, 0.28);
}


.cc-main .cc-section--metrics .metric-value-regional {
    color: oklch(0.42 0.02 85);
}


/* ============================================================
   Metric icon hover polish - additive under .cc-main only
   ============================================================ */
.cc-main .cc-section--metrics .metric-icon {
    transition: background-color 180ms ease, border-color 180ms ease,
                transform 180ms ease, box-shadow 180ms ease;
}

.cc-main .cc-section--metrics .metric-icon img {
    transition: filter 180ms ease, transform 180ms ease;
}

.cc-main .cc-section--metrics .metric-card:hover .metric-icon,
.cc-main .cc-section--metrics .metric-card-cream:hover .metric-icon {
    background: rgba(237, 139, 0, 0.18);
    border-color: rgba(0, 95, 110, 0.45);
    transform: scale(1.06) translateY(-1px);
    box-shadow: 0 2px 8px rgba(237, 139, 0, 0.18);
}

.cc-main .cc-section--metrics .metric-card:hover .metric-icon img,
.cc-main .cc-section--metrics .metric-card-cream:hover .metric-icon img {
    filter: brightness(1.08);
}



      #goProBanner.cc-guide-card {
        position: relative; display: flex; flex-direction: column; width: 100%;
        border-radius: 12px; overflow: hidden; cursor: pointer; text-decoration: none;
        background: linear-gradient(165deg, #0f2536 0%, #0a1628 100%);
        border: 1px solid rgba(26,188,156,0.22);
        box-shadow: 0 12px 40px rgba(10,22,40,0.18);
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      }

      #goProBanner.cc-guide-card:hover,
      #goProBanner.cc-guide-card:focus-visible {
        transform: translateY(-3px); border-color: rgba(26,188,156,0.5);
        box-shadow: 0 20px 50px rgba(10,22,40,0.28); outline: none;
      }

      #goProBanner.cc-guide-card::before {
        content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
        background: linear-gradient(90deg, transparent, var(--success-color), var(--accent-color), transparent); opacity:.9;
      }

      #goProBanner .cc-guide-media {
        position:relative; flex:0 0 auto; aspect-ratio:16/9;
        background:#05080f center/cover no-repeat;
      }

      #goProBanner .cc-guide-media::after {
        content:''; position:absolute; inset:0;
        background: linear-gradient(180deg, rgba(10,22,40,0) 30%, rgba(10,22,40,0.85) 100%);
      }

      #goProBanner .cc-guide-play {
        position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
        width:54px; height:54px; border-radius:50%; background:rgba(26,188,156,0.95);
        display:flex; align-items:center; justify-content:center;
        box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 0 8px rgba(26,188,156,0.18);
        transition: transform .3s ease, box-shadow .3s ease;
      }

      #goProBanner.cc-guide-card:hover .cc-guide-play,
      #goProBanner.cc-guide-card:focus-visible .cc-guide-play {
        transform: translate(-50%,-50%) scale(1.1);
        box-shadow:0 8px 28px rgba(0,0,0,0.6), 0 0 0 12px rgba(26,188,156,0.22);
      }

      #goProBanner .cc-guide-play i { color:#fff; font-size:18px; margin-left:3px; }

      #goProBanner .cc-guide-badge {
        position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:6px;
        font-family: var(--f); font-size:10px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
        color:var(--success-color); background:rgba(26,188,156,0.14); border:1px solid rgba(26,188,156,0.35);
        padding:5px 10px; border-radius:30px;
      }

      #goProBanner .cc-guide-badge .cc-dot {
        width:6px; height:6px; border-radius:50%; background:var(--accent-color);
        box-shadow:0 0 8px var(--accent-color); animation:ccGuideBlink 1.6s ease-in-out infinite;
      }

      #goProBanner .cc-guide-duration {
        position:absolute; bottom:10px; right:10px; z-index:2; background:rgba(0,0,0,0.72); color:#fff;
        font-family: var(--f); font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px; letter-spacing:.5px;
      }

      #goProBanner .cc-guide-body {
        flex:1 1 auto; display:flex; flex-direction:column; padding:16px 18px 18px; position:relative; z-index:2;
      }

      #goProBanner .cc-guide-eyebrow {
        font-family: var(--f); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
        color:var(--success-color); margin-bottom:6px;
      }

      #goProBanner .cc-guide-title {
        font-family: var(--f); font-size:1.15rem; font-weight:700; color:#fff; margin:0 0 7px; line-height:1.25;
      }

      #goProBanner .cc-guide-desc {
        font-family: var(--f); font-size:0.82rem; line-height:1.55; color:rgba(255,255,255,0.62); margin:0 0 14px;
      }

      #goProBanner .cc-guide-list {
        list-style:none; padding:0; margin:0 0 16px; font-family: var(--f); font-size:0.8rem; color:rgba(255,255,255,0.78);
      }

      #goProBanner .cc-guide-list li { display:flex; align-items:center; gap:9px; padding:5px 0; }

      #goProBanner .cc-guide-list i { color:var(--success-color); font-size:12px; flex:0 0 auto; }

      #goProBanner .cc-guide-cta {
        margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
        font-family: var(--f); font-size:0.82rem; font-weight:700; letter-spacing:.02em; color:#fff;
        background: linear-gradient(135deg, var(--success-color), var(--success-color-dark));
        padding:10px 18px; border-radius:8px; transition: gap .25s ease, filter .25s ease;
      }

      #goProBanner.cc-guide-card:hover .cc-guide-cta,
      #goProBanner.cc-guide-card:focus-visible .cc-guide-cta { gap:12px; filter:brightness(1.08); }

      #goProBanner .cc-guide-cta i { font-size:13px; }

      @media (prefers-reduced-motion: reduce) {
        #goProBanner.cc-guide-card, #goProBanner .cc-guide-play, #goProBanner .cc-guide-cta { transition:none; }
        #goProBanner .cc-guide-badge .cc-dot { animation:none; }
      }

    

      .cc-readguide {
        position:relative; display:flex; align-items:center; gap:10px; width:100%;
        margin-top:14px; padding:14px 15px; border-radius:12px; text-decoration:none;
        background:linear-gradient(165deg,#0f2536 0%,#0a1628 100%);
        border:1px solid rgba(26,188,156,0.22);
        box-shadow:0 12px 40px rgba(10,22,40,0.18);
        transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      }

      .cc-readguide:hover, .cc-readguide:focus-visible {
        transform:translateY(-3px); border-color:rgba(26,188,156,0.5);
        box-shadow:0 20px 50px rgba(10,22,40,0.28); outline:none; text-decoration:none;
      }

      .cc-readguide::before {
        content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:12px 12px 0 0;
        background:linear-gradient(90deg,transparent,#1ABC9C,#ED8B00,transparent); opacity:.9;
      }

      .cc-readguide-icon {
        flex:0 0 auto; width:34px; height:34px; border-radius:9px;
        display:flex; align-items:center; justify-content:center;
        background:rgba(26,188,156,0.14); border:1px solid rgba(26,188,156,0.35);
      }

      .cc-readguide-icon i { color:#1ABC9C; font-size:14px; }

      .cc-readguide-copy { display:flex; flex-direction:column; min-width:0; }

      .cc-readguide-eyebrow {
        font-family: var(--f); font-size:10px; font-weight:700;
        letter-spacing:.15em; text-transform:uppercase; color:#1ABC9C; margin-bottom:3px;
      }

      .cc-readguide-title {
        font-family: var(--f); font-size:.88rem; font-weight:700; color:#fff; line-height:1.3;
      }

      .cc-readguide-meta {
        font-family: var(--f); font-size:.72rem; color:rgba(255,255,255,0.55); margin-top:3px;
      }

      .cc-readguide-go { margin-left:auto; color:#ED8B00; font-size:13px; transition:transform .25s ease; }

      .cc-readguide:hover .cc-readguide-go { transform:translateX(3px); }

      @media (prefers-reduced-motion: reduce) {
        .cc-readguide, .cc-readguide-go { transition:none; }
        .cc-readguide:hover { transform:none; }
      }
}
}
@layer pg {
@scope (main) {
.cc-main .cc-recent-status,
.cc-main .cc-scope-badge,
.cc-map-gate__btn,
.cc-pop-badge,
.cc-popup-link,
.da-adv-active-count,
.da-pro-pill,
.da-scale-pill,
.da-sib-pill,
.eco-hero-badge,
.search-form-hero,
.search-mode-toggle,
.smt-btn { border-radius: var(--r-1); }
}
}
@layer pg {
html[data-theme="dark"] main .sideNav .nav-link { color: #8cb7be; }
html[data-theme="dark"] main .table-container { background: var(--surface); }
html[data-theme="dark"] main .metric-card { background: var(--surface); }
html[data-theme="dark"] main .metric-label { color: #bababa; }
html[data-theme="dark"] main .metric-value-regional { color: color-mix(in srgb, var(--teal) 40%, white); }
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 #more #linksContainer a { color: #95c3d4; }
html[data-theme="dark"] main .cc-area-search-hint { color: #b3b3b3; }
html[data-theme="dark"] main .cc-area-result-list { background: var(--surface); }
html[data-theme="dark"] main .cc-area-result { color: #95c3d4; }
html[data-theme="dark"] main .cc-area-result:hover { color: #8cb7be; }
html[data-theme="dark"] main .cc-area-result-state { color: #c2c2c2; }
html[data-theme="dark"] main #demoLinks h5 { color: #8cb7be; }
html[data-theme="dark"] main #demoLinks p { color: #b3b3b3; }
html[data-theme="dark"] main .cc-popup-row { color: #aeb3b7; }
html[data-theme="dark"] main .cc-popup-row i.fas { color: #95c3d4; }
html[data-theme="dark"] main .cc-popup-row i.fab { color: #95c3d4; }
html[data-theme="dark"] main .cc-popup-row strong { color: #989798; }
html[data-theme="dark"] main .cc-popup-row.cc-popup-desc { color: #aeb3b7; }
html[data-theme="dark"] main .cc-popup-row.cc-popup-existing { color: #be93a2; }
html[data-theme="dark"] main .cc-popup-row.cc-popup-existing i { color: #be93a2; }
html[data-theme="dark"] main .cc-popup-link { color: #8cb7be; }
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 .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: #989798; }
html[data-theme="dark"] main .as-faq-answer strong { color: #be93a2; }
html[data-theme="dark"] main .nearby-link { color: #95c3d4; }
html[data-theme="dark"] main .cta-search-form .form-control:focus { background: var(--surface); }
html[data-theme="dark"] main .map-controls-card .form-label { color: #8cb7be; }
html[data-theme="dark"] main .map-controls-card .bootstrap-select > .dropdown-toggle { background: var(--surface); color: #989798; }
html[data-theme="dark"] main .map-controls-card .bootstrap-select > .dropdown-toggle:focus { background: var(--surface); }
html[data-theme="dark"] main .map-controls-card .bootstrap-select.show > .dropdown-toggle { background: var(--surface); }
html[data-theme="dark"] main .map-controls-card .bootstrap-select .filter-option-inner-inner { color: #989798; }
html[data-theme="dark"] main .map-controls-card .dropdown-menu { background: var(--surface); }
html[data-theme="dark"] main .map-controls-card .dropdown-item { color: #989798; }
html[data-theme="dark"] main .map-controls-card .dropdown-item:hover { color: #989798; }
html[data-theme="dark"] main .map-controls-card .dropdown-item:focus { color: #989798; }
html[data-theme="dark"] main .map-controls-card .dropdown-item.active { color: #8cb7be; }
html[data-theme="dark"] main .map-controls-card .dropdown-item:active { color: #8cb7be; }
html[data-theme="dark"] main .map-controls-card .dropdown-item.selected { color: #8cb7be; }
html[data-theme="dark"] main .map-controls-card .dropdown-item.selected.active { color: #8cb7be; }
html[data-theme="dark"] main .map-controls-card .bs-actionsbox .btn { color: #8cb7be; background: var(--surface); }
html[data-theme="dark"] main h3 { color: #8cb7be; }
html[data-theme="dark"] main #ccTable tbody tr:hover { background: var(--surface); }
html[data-theme="dark"] main .search-form-hero .form-control { background: var(--surface); }
html[data-theme="dark"] main .da-kpi-label { color: color-mix(in srgb, var(--teal) 40%, white); color: #8cb7be; }
html[data-theme="dark"] main .da-kpi-sub { color: #c2c2c2; }
html[data-theme="dark"] main .da-toolbar-select option { background: var(--surface); color: #a3a3a3; }
html[data-theme="dark"] main .da-btn-outline.active { background: var(--surface); color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .da-adv-field .form-control { background: var(--surface); color: #a3a3a3; color: #989798; }
html[data-theme="dark"] main .da-adv-field .form-select { background: var(--surface); color: #a3a3a3; color: #989798; }
html[data-theme="dark"] main .da-adv-field .form-control:disabled { color: #b3b3b3; color: #c2c2c2; }
html[data-theme="dark"] main .da-adv-field .form-select:disabled { color: #b3b3b3; color: #c2c2c2; }
html[data-theme="dark"] main .da-sib-pill { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .da-view-btn { background: var(--surface); color: #95c3d4; }
html[data-theme="dark"] main .da-detail-siblings h6 { color: color-mix(in srgb, var(--teal) 40%, white); color: #8cb7be; }
html[data-theme="dark"] main .da-sib-item { background: var(--surface); }
html[data-theme="dark"] main .da-sib-item .sib-date { color: #c2c2c2; }
html[data-theme="dark"] main .da-sib-item .sib-desc { color: #a3a3a3; }
html[data-theme="dark"] main .da-sib-item .sib-da { color: #b3b3b3; }
html[data-theme="dark"] main .da-table-wrap { background: var(--surface); }
html[data-theme="dark"] main .da-addr { color: color-mix(in srgb, var(--teal) 40%, white); color: #8cbbc2; }
html[data-theme="dark"] main .da-desc { color: #b3b3b3; color: #b2b8bb; }
html[data-theme="dark"] main .da-places { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .da-dist { color: #ababab; }
html[data-theme="dark"] main .da-badge-approved { color: #95cac0; color: #95c0b7; }
html[data-theme="dark"] main .da-badge-neutral { color: #b3b3b3; color: #b4bbbe; }
html[data-theme="dark"] main .da-detail { color: #ababab; }
html[data-theme="dark"] main .da-detail-k { color: color-mix(in srgb, var(--teal) 40%, white); color: #8cb7be; }
html[data-theme="dark"] main .da-detail-v { color: #989798; }
html[data-theme="dark"] main .da-detail-notes { background: var(--surface); color: #ababab; }
html[data-theme="dark"] main .da-detail-notes b { color: color-mix(in srgb, var(--teal) 40%, white); color: #8cb7be; }
html[data-theme="dark"] main .da-detail a { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .da-scale-minor { color: #aeb3bb; }
html[data-theme="dark"] main .da-scale-moderate { color: #cab58c; }
html[data-theme="dark"] main .da-scale-major { color: #be93a2; }
html[data-theme="dark"] main .da-issue-pill { background: var(--alt); color: #ababab; }
html[data-theme="dark"] main .da-empty { background: var(--surface); color: #babac2; }
html[data-theme="dark"] main #daTable_wrapper .dataTables_info { color: #c2c2c2; color: #b3b3b3; }
html[data-theme="dark"] main .da-section-intro { color: #b7bec1; }
html[data-theme="dark"] main .da-coverage-note { color: #989798; }
html[data-theme="dark"] main .da-coverage-note strong { color: #8cb7be; }
html[data-theme="dark"] main .da-pro-overlay { background: var(--surface); }
html[data-theme="dark"] main .da-pro-overlay-title { color: #989798; }
html[data-theme="dark"] main .da-pro-overlay-sub { color: #b3b3b3; }
html[data-theme="dark"] main .da-kpi-value { color: #989798; }
html[data-theme="dark"] main .da-filter-head-label { color: #8cb7be; }
html[data-theme="dark"] main .da-filter-head-hint { color: #c2c2c2; }
html[data-theme="dark"] main .da-search-group { background: var(--surface); }
html[data-theme="dark"] main .da-search-group .form-control { color: #989798; }
html[data-theme="dark"] main .da-toolbar-select { background: var(--surface); color: #989798; }
html[data-theme="dark"] main .da-btn-search { background: var(--surface); }
html[data-theme="dark"] main .da-btn-outline { background: var(--surface); color: #8cb7be; }
html[data-theme="dark"] main .da-adv-toggle { background: var(--surface); color: #8cb7be; }
html[data-theme="dark"] main .da-adv-label { color: #8cb7be; }
html[data-theme="dark"] main .da-existing-field .da-adv-check { background: var(--surface); color: #989798; }
html[data-theme="dark"] main .da-filter-status { color: #b3b3b3; }
html[data-theme="dark"] main .da-filter-status strong { color: #8cb7be; }
html[data-theme="dark"] main #ccTable thead th { color: #8cb7be; }
html[data-theme="dark"] main #daTable thead th { color: #8cb7be; }
html[data-theme="dark"] main #ccTable tbody tr { background: var(--surface); }
html[data-theme="dark"] main #daTable tbody tr { background: var(--surface); }
html[data-theme="dark"] main #ccTable tbody td { color: #989798; }
html[data-theme="dark"] main #daTable tbody td { color: #989798; }
html[data-theme="dark"] main #ccTable a { color: #95c3d4; }
html[data-theme="dark"] main #ccTable_wrapper .dataTables_length select { color: #989798; background: var(--surface); }
html[data-theme="dark"] main #ccTable_wrapper .dataTables_filter input { color: #989798; background: var(--surface); }
html[data-theme="dark"] main #ccTable_wrapper .dataTables_info { color: #b3b3b3; }
html[data-theme="dark"] main #ccTable_wrapper .dataTables_paginate .paginate_button { color: #8cb7be; background: var(--surface); }
html[data-theme="dark"] main #daTable_wrapper .dataTables_paginate .paginate_button { color: #8cb7be; background: var(--surface); }
html[data-theme="dark"] main #ccTable_wrapper .dataTables_paginate .paginate_button.disabled { background: var(--surface); }
html[data-theme="dark"] main #daTable_wrapper .dataTables_paginate .paginate_button.disabled { background: var(--surface); }
html[data-theme="dark"] main .da-existing { color: #c499a8; }
html[data-theme="dark"] main .da-badge-pending { color: #d6b68c; }
html[data-theme="dark"] main .da-detail-grid > div { background: var(--surface); }
html[data-theme="dark"] main .cta-block .cta-search input:focus { background: var(--surface); }
html[data-theme="dark"] main #cc-search-modal .badge-sa2 { color: #e7aabc; }
html[data-theme="dark"] main #cc-search-modal .s-btn-view { color: #8cb7be; }
html[data-theme="dark"] main #cc-search-modal .s-btn-report { color: #ddb290; }
html[data-theme="dark"] main #cc-search-modal .s-btn-childcare { color: #d397af; }
html[data-theme="dark"] main #cc-search-modal .s-btn-disabled { background: var(--alt); border-color: var(--hair); }
html[data-theme="dark"] main .cc-main .cc-recent-status--approved { color: #93c9bf; }
html[data-theme="dark"] main .cc-main .cc-recent-status--assessing { color: #ddbb8c; }
html[data-theme="dark"] main .cc-main .cc-recent-status--refused { color: #be93a2; }
html[data-theme="dark"] main .cc-map-gate__btn { color: #91969b; }
}

/* ccarea_pg.css: the CF2 re-skin of the per-suburb Child Care page. Layer pg = above the page's own legacy CSS (layer pgpage, same file). CF2 token roles only. First cut: layout and the hero; refined after the first renders. */
@layer pg {
  main {
    --font-sans: var(--f); --font-mono: var(--f);
    --radius: var(--r-1); --radius-lg: var(--r-2);
  }
  .pg-chip-badge { text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-strong); color: var(--white); }
  .fas, .far, .fab { display: inline-block; min-inline-size: 1em; font-style: normal; }
  /* the old two-column shell (side nav + 9/12 column) is gone: one full-width column, the dock does the in-page nav */
  main .cc-areawrap { max-inline-size: var(--w-max); inline-size: calc(100% - 2 * var(--gutter)); margin-inline: auto; padding-block: var(--s-6) var(--s-8); }
  main .cc-main { width: 100%; max-width: none; padding: 0; flex: none; }
  main .cc-asiderow { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; margin-block-start: var(--s-7); }
  main .cc-asiderow #goProBanner { margin: 0; }
  main .cc-asiderow .cc-readguide { margin: 0; align-self: start; }
}

/* ---- R1 fixes (24 Oct): contrast, dark theme, targets, square tags, wide-table cue ---- */
@layer pg {
  /* orange primary buttons carry navy text */
  main :is(.cta-search button, .cc-map-gate__btn) { color: var(--navy-9); }
  main .cc-recent-status--assessing { color: var(--orange-ink, #8a4b00); }
  main .cc-recent-status--approved { color: #0b6b57; }
  main .smt-btn:not(.active) { color: rgb(255 255 255 / .78); }
  /* square, like the rest of CF2 (the round play button stays) */
  main :is(.cc-guide-badge, .cc-recent-status) { border-radius: var(--r-1); }
  main .cc-notify, main button:has(> .fa-bell) { min-block-size: 2.75rem; }
  /* dark theme: the legacy colour variables follow the theme; metric cards, tables and the search results stay light cards (as on the benchmark pages) */
  html[data-theme="dark"] main {
    --lg-ink: var(--fg); --ink-light: var(--fg-2); --ink-muted: var(--fg-3); --ink-faint: var(--fg-3);
    --surface: var(--alt); --surface-warm: var(--alt); --surface-cool: var(--alt);
    --accent: var(--teal-2); --border: var(--hair); --border-light: var(--hair);
  }
  html[data-theme="dark"] main :is(.metric-card, .table-container, table, #cc-search-modal .sm-body) {
    color-scheme: light; --lk: color-mix(in srgb, var(--teal) 72%, var(--navy-9));
    --lg-ink: var(--navy-9); --ink-light: color-mix(in srgb, var(--navy-9) 82%, white); --ink-muted: color-mix(in srgb, var(--navy-9) 68%, white); --ink-faint: color-mix(in srgb, var(--navy-9) 60%, white);
    --surface: var(--white); --surface-warm: var(--cream); --surface-cool: var(--cream);
    --accent: var(--lk); --border: var(--hair-2); --border-light: var(--cream);
  }
  html[data-theme="dark"] main :is(.metric-card, .table-container, table) :is(a, .linkReg, .linkS4) { color: var(--lk) !important; }
  html[data-theme="dark"] main .table-container :is(td, th, .dataTables_info, .paginate_button) { color: color-mix(in srgb, var(--navy-9) 78%, white) !important; }
  html[data-theme="dark"] main :is(.cc-eyebrow, .cc-recent-addr, .cc-recent-mapcue) { color: var(--mint); }
  html[data-theme="dark"] main .metric-value-local { color: var(--lk); }
}
/* a table that scrolls sideways says so, and fades at its right edge */
@layer pg {
  .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; }
}
@property --pg-edge { syntax: '<length>'; inherits: false; initial-value: 40px; }
@keyframes pgEdgeOff { to { --pg-edge: 0px; } }
@layer pg {
  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%; }
  }
}
/* phone: 44px targets for the directory pager, page-size select and filter box */
@media (max-width: 40rem) {
  @layer pg {
    main :is(.dataTables_paginate .paginate_button, .dataTables_length select, .dataTables_filter input, .dataTables_filter label) { min-block-size: 2.75rem; }
    main .dataTables_paginate .paginate_button { min-inline-size: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
  }
}
@layer pg {
  html[data-theme="dark"] main .cc-map-gate__btn { color: var(--navy-9) !important; }
  html[data-theme="dark"] main .metric-card .metric-label { color: color-mix(in srgb, var(--navy-9) 68%, white) !important; }
}