:root {
    --color-brand:#0b6f74;
    --color-brand-dark:#07585c;
    --color-brand-hover:#064c50;
    --color-brand-soft:#e8f5f4;
    --color-brand-soft-strong:#d7eeec;
    --color-ink:#101828;
    --color-text:#344054;
    --color-muted:#667085;
    --color-subtle:#98a2b3;
    --color-page:#f3f6f8;
    --color-surface:#ffffff;
    --color-surface-soft:#f8fafb;
    --color-surface-muted:#f2f4f7;
    --color-border:#e4e7ec;
    --color-border-strong:#d0d5dd;
    --color-map-blue:#2f80ed;
    --color-danger:#d92d20;
    --color-danger-soft:#fef3f2;

    --shadow-card:0 1px 2px rgba(16,24,40,0.04),0 8px 24px rgba(16,24,40,0.06);
    --shadow-soft:0 3px 10px rgba(16,24,40,0.05);
    --shadow-float:0 14px 34px rgba(16,24,40,0.18);

    --radius-xs:8px;
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:18px;
    --radius-xl:22px;
    --radius-hero:28px;

    --site-max-width:1240px;

    --header-height:72px;
    --stats-height:88px;

    --global-footer-height:36px;

    --explorer-sidebar-width:320px;
}

*,*::before,*::after {
    box-sizing:border-box;
}

html {
    width:100%;
    min-width:0;
    scroll-behavior:smooth;
    font-family:"Inter",sans-serif;
}

body {
    width:100%;
    min-width:320px;
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    background:var(--color-page);
    color:var(--color-text);
    font-family:"Inter",sans-serif;
    font-size:16px;
    line-height:1.5;
}

button,input,select,textarea {
    font:inherit;
}

button,a {
    -webkit-tap-highlight-color:transparent;
}

button {
    color:inherit;
}

a {
    color:inherit;
}

h1,h2,h3,h4,p {
    margin-top:0;
}

img,svg {
    max-width:100%;
}

[hidden] {
    display:none !important;
}

.page-eyebrow,
.hero-kicker,
.explore-eyebrow,
.explore-section-label,
.transaction-list-eyebrow,
.block-drawer-eyebrow,
.building-kicker,
.building-section-kicker {
    color:var(--color-brand);
    font-size:0.69rem;
    font-weight:800;
    letter-spacing:0.055em;
    text-transform:uppercase;
}

.page-eyebrow {
    margin:0 0 9px;
}

.page-description {
    max-width:760px;
    margin:14px 0 0;
    color:var(--color-muted);
    font-size:0.94rem;
    line-height:1.65;
}

.site-header {
    position:sticky;
    top:0;

    z-index:1200;

    width:100%;

    background:rgba(255,255,255,0.97);

    border-bottom:
        1px solid
        var(--color-border);

    box-shadow:
        0 1px 2px
        rgba(16,24,40,0.025);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.site-shell {
    width:100%;
    max-width:var(--site-max-width);
    margin:0 auto;
    padding:0 28px;
}

.site-header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:var(--header-height);
    gap:30px;
}

.site-header .site-shell {
    width:100%;
    max-width:none;
    margin:0;
    padding:0 20px;
}

.site-header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:none;
    min-height:var(--header-height);
    margin:0;
    gap:30px;
}

.site-brand {
    display:inline-flex;
    align-items:center;
    min-width:0;
    gap:10px;
    color:inherit;
    text-decoration:none;
}

.site-brand-mark {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:38px;
    height:38px;
    background:linear-gradient(
        145deg,
        #0f848b,
        var(--color-brand-dark)
    );
    color:#ffffff;
    border-radius:11px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 5px 12px rgba(11,111,116,0.18);
    font-size:1rem;
    font-weight:800;
}

.site-brand-text {
    display:flex;
    flex-direction:column;
    min-width:0;
}

.site-brand-text strong {
    overflow:hidden;
    color:var(--color-ink);
    font-size:0.86rem;
    font-weight:800;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.site-brand-text small {
    overflow:hidden;
    margin-top:2px;
    color:var(--color-muted);
    font-size:0.61rem;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.site-nav {
    display:flex;
    align-items:center;
    flex:0 0 auto;
    gap:5px;
    background:transparent;
}

.site-nav-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:8px 14px;
    color:#475467;
    border-radius:999px;
    font-size:0.74rem;
    font-weight:700;
    text-decoration:none;
    transition:
        color 0.15s ease,
        background 0.15s ease;
}

.site-nav-link:hover {
    background:#f2f4f7;
    color:var(--color-ink);
}

.site-nav-link.active,
.site-nav-link[aria-current="page"] {
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
}

.site-topbar {
    display:none;
}

.site-brand-row {
    background:transparent;
}

.site-brand-inner {
    display:flex;
    align-items:center;
    min-height:var(--header-height);
}

.site-header>.site-nav {
    position:absolute;
    inset:0;
    pointer-events:none;
}

.site-header>.site-nav>.site-shell {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-height:var(--header-height);
    gap:5px;
}

.site-header>.site-nav .site-nav-link {
    pointer-events:auto;
}

.app-card {
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
}

input,
select,
textarea {
    border-color:var(--color-border-strong);
}

input:focus,
select:focus,
textarea:focus {
    outline:none;
    border-color:var(--color-brand);
    box-shadow:0 0 0 3px rgba(11,111,116,0.1);
}

.primary-button,
.filter-button-primary,
.block-drawer-action {
    background:var(--color-brand);
    color:#ffffff;
    border-color:var(--color-brand);
}

.primary-button:hover,
.filter-button-primary:hover,
.block-drawer-action:hover {
    background:var(--color-brand-dark);
    border-color:var(--color-brand-dark);
}

.secondary-button,
.filter-button-secondary {
    background:#ffffff;
    color:#475467;
    border:1px solid var(--color-border-strong);
}

.secondary-button:hover,
.filter-button-secondary:hover {
    background:#f8fafb;
}

sgds-button::part(button) {
    border-radius:10px;
    font-weight:700;
}

sgds-button[variant="primary"]::part(button) {
    background:var(--color-brand);
    border-color:var(--color-brand);
}

sgds-button[variant="primary"]::part(button):hover {
    background:var(--color-brand-dark);
    border-color:var(--color-brand-dark);
}

.market-stats-bar {
    position:relative;
    z-index:1000;
    width:100%;
    background:#ffffff;
    border-bottom:1px solid var(--color-border);
}

.market-stats-bar .site-shell {
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

.market-stats-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
    min-height:var(--stats-height);
}

.market-stat {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:15px 28px;
    border-right:1px solid #edf0f2;
}

.market-stat:last-child {
    border-right:0;
}

.market-stat strong {
    overflow:hidden;
    color:var(--color-ink);
    font-size:clamp(1.12rem,1.5vw,1.35rem);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.035em;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.market-stat:first-child strong,
.market-stat:nth-child(2) strong {
    color:var(--color-brand-dark);
}

.market-stat span {
    margin-top:5px;
    color:var(--color-muted);
    font-size:0.67rem;
    font-weight:600;
}

.explorer-page {
    width:100%;
    max-width:none;

    height:
        calc(
            100dvh
            - var(--header-height)
            - var(--global-footer-height)
        );

    min-height:560px;

    margin:0;
    padding:0;
}

body:has(#market-stats-bar:not([hidden]))
.explorer-page {
    height:
        calc(
            100dvh
            - var(--header-height)
            - var(--stats-height)
            - var(--global-footer-height)
        );

    min-height:520px;
}

.explorer-layout {
    display:grid;
    grid-template-columns:
        var(--explorer-sidebar-width)
        minmax(0,1fr);
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:#ffffff;
    transition:grid-template-columns 0.22s ease;
}

.explorer-layout.sidebar-collapsed {
    grid-template-columns:
        0
        minmax(0,1fr);
}

.explorer-layout.sidebar-collapsed .explore-sidebar {
    width:0;
    min-width:0;
    overflow:hidden;
    border-right:0;
}

.explore-sidebar {
    position:relative;
    z-index:600;
    width:var(--explorer-sidebar-width);
    min-width:var(--explorer-sidebar-width);
    height:100%;
    overflow:hidden;
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfdfd 100%
    );
    border-right:1px solid var(--color-border);
}

.explore-sidebar-scroll {
    width:100%;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    padding:22px;
    scrollbar-width:thin;
    scrollbar-color:#d0d5dd transparent;
}

.explore-sidebar-header {
    margin-bottom:20px;
}

.explore-sidebar-header h1 {
    margin:5px 0 6px;
    color:var(--color-ink);
    font-size:1.22rem;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-0.035em;
}

.explore-sidebar-header>p:last-child {
    max-width:285px;
    margin-bottom:0;
    color:var(--color-muted);
    font-size:0.73rem;
    line-height:1.45;
}

.explore-search-form,
.explore-primary-search,
.explore-filter-section,
.explore-view-section {
    width:100%;
    min-width:0;
}

.explore-search-form {
    display:flex;
    flex-direction:column;
}

.explore-primary-search {
    display:flex;
    flex-direction:column;
    width:100%;
    gap:9px;
}

.explore-primary-search sgds-input {
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
}

.explore-search-button {
    display:block;
    width:100%;
}

.explore-search-button::part(button) {
    width:100%;
    min-height:42px;
}

.explore-filter-section,
.explore-view-section {
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:0;
    border-top:1px solid #edf0f2;
}

/*
   IMPORTANT:
   Do not put a fixed width directly on sgds-select.

   Keeping sgds-select at 100% preserves its trigger and
   option dropdown behaviour.

   The right padding on the section makes the controls
   visually narrower without interfering with SGDS.
*/

/* ---------------------------------------------------------------------
   Search filters
   --------------------------------------------------------------------- */

.explore-filter-section {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    width: 100%;

    gap: 10px;

    margin-top: 20px;

    padding-top: 18px;

    padding-right: 0;

    border-top:
        1px solid
        #edf0f2;
}


.explore-filter-section .explore-section-label {
    margin:
        0
        0
        3px;

    color:
        #7a8699;

    font-size:
        0.69rem;

    font-weight:
        800;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}


/* ---------------------------------------------------------------------
   Explorer native filter controls
   --------------------------------------------------------------------- */

.explore-filter-control {
    display: flex;

    flex-direction: column;

    width: 100%;

    min-width: 0;

    gap: 7px;
}


.explore-filter-control label {
    width: 100%;

    margin: 0;

    color:
        var(--color-ink);

    font-size: 0.78rem;

    font-weight: 700;

    text-align: left;
}


/*
   Native selects are used for these three Explorer filters.

   The browser's default dropdown arrow is removed and replaced with
   our own arrow. This lets the selected value sit genuinely in the
   centre instead of appearing shifted to the right.
*/

.explore-filter-control select {
    width: 100%;

    min-width: 0;

    min-height: 43px;

    /*
       Equal left and right padding is important.
       It keeps the text centred even though there is an arrow.
    */

    padding:
        8px
        42px;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;


    /* -------------------------------------------------------------
       Surface
       ------------------------------------------------------------- */

    background-color:
        #ffffff;


    /* -------------------------------------------------------------
       Custom dropdown arrow
       ------------------------------------------------------------- */

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #475467 50%
        ),
        linear-gradient(
            135deg,
            #475467 50%,
            transparent 50%
        );


    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;


    background-size:
        5px 5px,
        5px 5px;


    background-repeat:
        no-repeat;


    /* -------------------------------------------------------------
       Text
       ------------------------------------------------------------- */

    color:
        var(--color-ink);

    font-size: 0.78rem;

    font-weight: 500;

    line-height: 1.2;

    text-align: center;

    text-align-last: center;


    /* -------------------------------------------------------------
       Border
       ------------------------------------------------------------- */

    border:
        1px solid
        var(--color-border-strong);

    border-radius: 10px;

    cursor: pointer;
}


.explore-filter-control select:hover {
    border-color:
        #98a2b3;
}


.explore-filter-control select:focus {
    outline: none;

    border-color:
        var(--color-brand);

    box-shadow:
        0 0 0 3px
        rgba(
            11,
            111,
            116,
            0.1
        );
}


/*
   Options themselves remain left aligned when the dropdown is open.
   Only the currently selected value is centred.
*/

.explore-filter-control select option {
    background:
        #ffffff;

    color:
        var(--color-ink);

    text-align: left;
}

.explore-view-section {
    gap:9px;
    margin-top:20px;
    padding-top:18px;
}

.explore-section-label {
    width:100%;
    margin:0;
    color:#7a8699;
}

.results-view-tabs {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    padding:4px;
    background:#f2f4f7;
    border:1px solid var(--color-border);
    border-radius:12px;
}

.results-view-tab {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:40px;
    padding:8px 10px;
    gap:7px;
    background:transparent;
    color:var(--color-muted);
    border:0;
    border-radius:9px;
    font-size:0.78rem;
    font-weight:750;
    cursor:pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.results-view-tab:hover {
    color:var(--color-ink);
}

.results-view-tab:active {
    transform:scale(0.98);
}

.results-view-tab.active {
    background:#ffffff;
    color:var(--color-brand-dark);
    box-shadow:
        0 1px 2px rgba(16,24,40,0.08),
        0 3px 8px rgba(16,24,40,0.04);
}

.view-tab-icon,
.tab-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:17px;
    height:17px;
}

.explore-current-search {
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #edf0f2;
}

.explore-current-search>strong {
    display:block;
    margin-top:7px;
    color:var(--color-ink);
    font-size:0.82rem;
    font-weight:750;
    line-height:1.4;
}

.explore-current-search>span {
    display:block;
    margin-top:5px;
    color:var(--color-muted);
    font-size:0.7rem;
}

.explore-search-meta {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:12px;
}

.explore-search-meta span {
    color:var(--color-muted);
    font-size:0.67rem;
    line-height:1.45;
}

.explorer-stage {
    position:relative;
    width:100%;
    height:100%;
    min-width:0;
    min-height:520px;
    overflow:hidden;
    background:#eef3f4;
}

.sidebar-toggle {
    position:absolute;
    z-index:700;
    top:50%;
    left:0;
    display:grid;
    place-items:center;
    width:30px;
    height:56px;
    padding:0;
    transform:translateY(-50%);
    background:#ffffff;
    color:var(--color-brand-dark);
    border:1px solid var(--color-border-strong);
    border-left:0;
    border-radius:0 10px 10px 0;
    box-shadow:var(--shadow-soft);
    font-size:1.25rem;
    font-weight:700;
    cursor:pointer;
}

.sidebar-toggle:hover {
    background:var(--color-brand-soft);
}

.search-result-workspace,
.map-results-view {
    position:relative;
    width:100%;
    height:100%;
    min-width:0;
    min-height:520px;
    overflow:hidden;
}

.explorer-empty-state {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    min-height:520px;
    padding:40px;
    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(11,111,116,0.08),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #f7fbfb,
            #edf4f4
        );
}

.explorer-empty-content {
    width:min(100%,460px);
    text-align:center;
}

.explorer-empty-icon {
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    margin:0 auto 17px;
    background:var(--color-brand);
    color:#ffffff;
    border:7px solid rgba(255,255,255,0.9);
    border-radius:17px;
    box-shadow:
        0 0 0 1px rgba(11,111,116,0.12),
        0 14px 32px rgba(11,111,116,0.18);
    font-size:1.2rem;
    font-weight:800;
}

.explorer-empty-content h2 {
    margin:0;
    color:var(--color-ink);
    font-size:clamp(1.4rem,3vw,1.85rem);
    font-weight:800;
    letter-spacing:-0.035em;
}

.explorer-empty-content>p {
    max-width:400px;
    margin:9px auto 0;
    color:var(--color-muted);
    font-size:0.84rem;
    line-height:1.6;
}

.explorer-empty-example {
    display:inline-flex;
    align-items:center;
    margin-top:18px;
    padding:5px 6px 5px 11px;
    gap:6px;
    background:rgba(255,255,255,0.86);
    border:1px solid var(--color-border);
    border-radius:999px;
    box-shadow:var(--shadow-soft);
}

.explorer-empty-example span {
    color:var(--color-muted);
    font-size:0.68rem;
}

.example-postal-code {
    padding:5px 9px;
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    border:0;
    border-radius:999px;
    font-size:0.7rem;
    font-weight:750;
    cursor:pointer;
}

#nearby-map {
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    min-width:0;
    min-height:520px;
    margin:0;
    padding:0;
    background:#dce6e7;
}

#nearby-map.leaflet-container {
    width:100% !important;
    height:100% !important;
    min-height:520px;
    font-family:"Inter",sans-serif;
}

#nearby-map .leaflet-tile,
#nearby-map .leaflet-marker-icon,
#nearby-map .leaflet-marker-shadow {
    max-width:none !important;
    max-height:none !important;
}

.price-marker-shell,
.origin-marker-shell {
    display:flex !important;
    align-items:center;
    justify-content:center;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
}

.map-origin-marker {
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    background:var(--color-map-blue);
    border:4px solid #ffffff;
    border-radius:50%;
    box-shadow:
        0 0 0 6px rgba(47,128,237,0.22),
        0 5px 14px rgba(16,24,40,0.28);
}

.map-origin-dot {
    display:block;
    width:6px;
    height:6px;
    background:#ffffff;
    border-radius:50%;
}

/* =====================================================================
   MAP TRANSACTION CALLOUT
   ===================================================================== */

.map-transaction-marker {
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    min-width:28px;
    height:24px;

    padding:
        0
        7px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    color:
        var(--color-ink);

    border:
        1px solid
        rgba(
            208,
            213,
            221,
            0.95
        );

    border-radius:8px;

    box-shadow:
        0 2px 7px
        rgba(
            16,
            24,
            40,
            0.16
        );

    font-size:0.65rem;
    font-weight:800;
    line-height:1;

    white-space:nowrap;

    cursor:pointer;

    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease;
}


/* ---------------------------------------------------------------------
   Pointer border
   --------------------------------------------------------------------- */

.map-transaction-marker::before {
    content:"";

    position:absolute;

    left:50%;
    bottom:-7px;

    width:0;
    height:0;

    transform:
        translateX(-50%);

    border-left:
        6px solid transparent;

    border-right:
        6px solid transparent;

    border-top:
        7px solid
        rgba(
            208,
            213,
            221,
            0.95
        );
}


/* ---------------------------------------------------------------------
   White centre of pointer
   --------------------------------------------------------------------- */

.map-transaction-marker::after {
    content:"";

    position:absolute;

    left:50%;
    bottom:-5px;

    width:0;
    height:0;

    transform:
        translateX(-50%);

    border-left:
        5px solid transparent;

    border-right:
        5px solid transparent;

    border-top:
        6px solid
        rgba(
            255,
            255,
            255,
            0.96
        );
}


.map-transaction-marker:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 5px 12px
        rgba(
            16,
            24,
            40,
            0.22
        );
}


/* =====================================================================
   SEARCHED BLOCK
   ===================================================================== */

.map-transaction-marker.is-origin-building {
    min-width:58px;

    padding:
        0
        8px;

    color:
        var(--color-map-blue);

    border-color:
        var(--color-map-blue);

    font-weight:850;

    box-shadow:
        0 3px 10px
        rgba(
            47,
            128,
            237,
            0.22
        );
}


.map-transaction-marker.is-origin-building::before {
    border-top-color:
        var(--color-map-blue);
}


/* Searched block */

.map-transaction-marker.is-origin-building {
    min-width:58px;

    padding:
        0 8px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    color:
        var(--color-map-blue);

    border:
        1.5px solid
        var(--color-map-blue);

    font-weight:850;

    box-shadow:
        0 3px 9px
        rgba(
            47,
            128,
            237,
            0.22
        );
}

#nearby-map .leaflet-tooltip {
    padding:6px 9px;
    background:rgba(16,24,40,0.92);
    color:#ffffff;
    border:0;
    border-radius:8px;
    box-shadow:var(--shadow-soft);
    font-size:0.67rem;
    font-weight:650;
}

#nearby-map .leaflet-tooltip-top::before {
    border-top-color:rgba(16,24,40,0.92);
}

.map-floating-location {
    position:absolute;
    z-index:500;
    top:18px;
    left:18px;
    display:flex;
    flex-direction:column;
    max-width:min(360px,calc(100% - 36px));
    padding:10px 14px;
    background:rgba(255,255,255,0.94);
    border:1px solid rgba(208,213,221,0.9);
    border-radius:13px;
    box-shadow:0 8px 24px rgba(16,24,40,0.12);
    backdrop-filter:blur(10px);
    pointer-events:none;
}

.map-floating-location span {
    color:var(--color-muted);
    font-size:0.61rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.map-floating-location strong {
    overflow:hidden;
    margin-top:2px;
    color:var(--color-ink);
    font-size:0.79rem;
    font-weight:750;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.map-list-drawer-button {
    position:absolute;
    z-index:500;
    right:20px;
    bottom:44px;
    display:inline-flex;
    align-items:center;
    min-height:52px;
    padding:8px 14px 8px 9px;
    gap:9px;
    background:#ffffff;
    color:var(--color-ink);
    border:1px solid var(--color-border-strong);
    border-radius:14px;
    box-shadow:var(--shadow-float);
    cursor:pointer;
}

.map-list-drawer-icon {
    display:grid;
    place-items:center;
    width:33px;
    height:33px;
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    border-radius:9px;
}

.map-list-drawer-button>span:last-child {
    display:flex;
    flex-direction:column;
    text-align:left;
}

.map-list-drawer-button strong {
    font-size:0.75rem;
    font-weight:750;
}

.map-list-drawer-button small {
    margin-top:1px;
    color:var(--color-muted);
    font-size:0.62rem;
}

.list-results-view {
    position:relative;
    width:100%;
    height:100%;
    min-height:0;
    overflow-y:auto;
    padding:27px 29px 36px;
    background:#ffffff;
}

.transaction-list-header,
.transactions-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.transaction-list-header h2,
.transactions-heading h2 {
    margin:4px 0;
    color:var(--color-ink);
    font-size:1.3rem;
    font-weight:800;
    letter-spacing:-0.03em;
}

.transaction-list-header p:last-child,
.transactions-heading p {
    margin:0;
    color:var(--color-muted);
    font-size:0.74rem;
}

.transaction-toolbar {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.transaction-controls {
    display:grid;
    grid-template-columns:
        minmax(150px,1.2fr)
        minmax(130px,1fr)
        minmax(125px,0.9fr)
        minmax(125px,0.9fr);
    flex:1 1 auto;
    gap:10px;
    padding:13px;
    background:#f8fafb;
    border:1px solid #e8ecef;
    border-radius:13px;
}

.transaction-control {
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:6px;
}

.transaction-control label {
    color:#475467;
    font-size:0.66rem;
    font-weight:700;
}

.transaction-control select,
.transaction-control input {
    width:100%;
    min-height:39px;
    padding:8px 10px;
    background:#ffffff;
    color:var(--color-ink);
    border:1px solid var(--color-border-strong);
    border-radius:9px;
    font-size:0.75rem;
}

.transaction-filter-actions {
    display:flex;
    flex:0 0 auto;
    gap:8px;
}

.filter-button,
.transaction-pagination button {
    min-height:39px;
    padding:8px 13px;
    border-radius:9px;
    font-size:0.74rem;
    font-weight:700;
    cursor:pointer;
}

.table-container {
    overflow:hidden;
    overflow-x:auto;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:13px;
}

.transactions-table {
    width:100%;
    min-width:1120px;
    border-collapse:collapse;
}

.transactions-table th,
.transactions-table td {
    padding:12px 13px;
    border-bottom:1px solid #edf0f2;
    text-align:left;
    white-space:nowrap;
}

.transactions-table th {
    background:#f8fafb;
    color:var(--color-muted);
    font-size:0.64rem;
    font-weight:800;
    letter-spacing:0.025em;
    text-transform:uppercase;
}

.transactions-table td {
    color:#475467;
    font-size:0.74rem;
}

.transactions-table tbody tr:last-child td {
    border-bottom:0;
}

.transactions-table tbody tr:hover {
    background:#fbfdfd;
}

.transaction-address-link {
    color:var(--color-ink);
    font-weight:650;
    text-decoration:none;
}

.transaction-address-link:hover {
    color:var(--color-brand);
    text-decoration:underline;
    text-underline-offset:3px;
}

.price-cell {
    color:var(--color-ink) !important;
    font-weight:800;
}

.transaction-pagination {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-top:15px;
}

.transaction-pagination button {
    background:#ffffff;
    color:#475467;
    border:1px solid var(--color-border-strong);
}

.transaction-pagination button:not(:disabled):hover {
    background:#f8fafb;
}

.transaction-pagination button:disabled {
    opacity:0.45;
    cursor:not-allowed;
}

#page-information {
    min-width:100px;
    color:var(--color-muted);
    font-size:0.72rem;
    text-align:center;
}

.drawer-close-button {
    display:none;
    place-items:center;
    flex:0 0 auto;
    width:35px;
    height:35px;
    padding:0;
    background:#f2f4f7;
    color:#475467;
    border:0;
    border-radius:10px;
    font-size:1.25rem;
    cursor:pointer;
}

.drawer-close-button:hover {
    background:#e8ebef;
}

.list-results-view.map-drawer-mode {
    position:absolute;
    z-index:750;
    top:18px;
    right:18px;
    bottom:18px;
    width:min(440px,calc(100% - 36px));
    height:auto;
    overflow-y:auto;
    padding:20px;
    background:#ffffff;
    border:1px solid var(--color-border-strong);
    border-radius:18px;
    box-shadow:0 18px 44px rgba(16,24,40,0.22);
}

.list-results-view.map-drawer-mode
.drawer-close-button {
    display:grid;
}

.list-results-view.map-drawer-mode
.transaction-controls {
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.list-results-view.map-drawer-mode
.table-container {
    overflow:visible;
    background:transparent;
    border:0;
}

.list-results-view.map-drawer-mode
.transactions-table {
    display:block;
    width:100%;
    min-width:0;
}

.list-results-view.map-drawer-mode
.transactions-table thead {
    display:none;
}

.list-results-view.map-drawer-mode
.transactions-table tbody {
    display:grid;
    gap:9px;
}

.list-results-view.map-drawer-mode
.transactions-table tbody tr {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:12px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:13px;
}

.list-results-view.map-drawer-mode
.transactions-table td {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:7px 4px;
    gap:2px;
    border:0;
    font-size:0.7rem;
    white-space:normal;
}

.list-results-view.map-drawer-mode
.transactions-table td::before {
    color:var(--color-subtle);
    font-size:0.55rem;
    font-weight:750;
    letter-spacing:0.03em;
    text-transform:uppercase;
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(1)::before {
    content:"Month";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(2)::before {
    content:"Address";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(3)::before {
    content:"Postal code";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(4)::before {
    content:"Distance";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(5)::before {
    content:"Storey";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(6)::before {
    content:"Area";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(7)::before {
    content:"Sq ft";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(8)::before {
    content:"Flat model";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(9)::before {
    content:"Remaining lease";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(10)::before {
    content:"Resale price";
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(2),
.list-results-view.map-drawer-mode
.transactions-table td:nth-child(10) {
    grid-column:1 / -1;
}

.list-results-view.map-drawer-mode
.transactions-table td:nth-child(10) {
    margin-top:2px;
    padding-top:10px;
    border-top:1px solid #edf0f2;
    color:var(--color-brand-dark) !important;
    font-size:0.95rem;
    font-weight:800;
}

.block-drawer {
    position:absolute;
    z-index:800;
    top:18px;
    right:18px;
    bottom:18px;
    width:min(390px,calc(100% - 36px));
    overflow-y:auto;
    padding:21px;
    background:rgba(255,255,255,0.985);
    border:1px solid var(--color-border-strong);
    border-radius:18px;
    box-shadow:0 18px 44px rgba(16,24,40,0.22);
    backdrop-filter:blur(12px);
    transition:width 0.22s ease;
}

.block-drawer.is-expanded {
    width:min(620px,calc(100% - 36px));
}

.block-drawer-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:8px;
}

.block-drawer-header-left {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
}

.block-drawer .drawer-close-button {
    display:grid;
}

.block-drawer h2 {
    margin:9px 0 5px;
    color:var(--color-ink);
    font-size:1.18rem;
    font-weight:800;
    line-height:1.25;
    letter-spacing:-0.035em;
}

.block-drawer-meta {
    margin:0;
    color:var(--color-muted);
    font-size:0.72rem;
    line-height:1.5;
}

.block-drawer-back-button {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:4px 8px;
    background:transparent;
    color:var(--color-brand-dark);
    border:1px solid #d4e8e7;
    border-radius:8px;
    font-size:0.63rem;
    font-weight:750;
    cursor:pointer;
}

.block-drawer-back-button:hover {
    background:var(--color-brand-soft);
}

.block-drawer-primary-stat {
    margin-top:20px;
    padding:17px;
    background:linear-gradient(
        145deg,
        #e9f7f6,
        #f6fbfb
    );
    border:1px solid #d2eae8;
    border-radius:15px;
}

.block-drawer-primary-stat span {
    color:var(--color-muted);
    font-size:0.69rem;
    font-weight:600;
}

.block-drawer-primary-stat strong {
    display:block;
    margin-top:4px;
    color:var(--color-brand-dark);
    font-size:1.65rem;
    font-weight:800;
    letter-spacing:-0.045em;
}

.block-drawer-stats {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:11px;
}

.block-drawer-stats>div {
    min-width:0;
    padding:11px 9px;
    background:#f8fafb;
    border:1px solid #edf0f2;
    border-radius:11px;
}

.block-drawer-stats span {
    display:block;
    color:var(--color-muted);
    font-size:0.59rem;
}

.block-drawer-stats strong {
    display:block;
    overflow:hidden;
    margin-top:4px;
    color:var(--color-ink);
    font-size:0.74rem;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.block-drawer-transactions {
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #edf0f2;
}

.block-drawer-transactions-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:10px;
}

.block-drawer-transactions-header h3 {
    margin:4px 0 0;
    color:var(--color-ink);
    font-size:0.96rem;
    font-weight:800;
    letter-spacing:-0.025em;
}

.block-drawer-transaction-note {
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    padding:4px 8px;
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    border-radius:999px;
    font-size:0.58rem;
    font-weight:750;
    white-space:nowrap;
}

.block-drawer-transaction-status {
    margin:10px 0 0;
    padding:12px 13px;
    background:#f8fafb;
    color:var(--color-muted);
    border:1px solid #edf0f2;
    border-radius:11px;
    font-size:0.69rem;
}

.block-drawer-transaction-table-wrapper {
    overflow:hidden;
    margin-top:9px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:13px;
    box-shadow:var(--shadow-soft);
}

.block-drawer-transaction-table {
    width:100%;
    border-collapse:collapse;
}

.block-drawer-transaction-table th,
.block-drawer-transaction-table td {
    padding:10px 12px;
    border-bottom:1px solid #edf0f2;
}

.block-drawer-transaction-table th {
    background:#f8fafb;
    color:#7a8699;
    font-size:0.58rem;
    font-weight:800;
    letter-spacing:0.05em;
    text-transform:uppercase;
}

.block-drawer-transaction-table
tbody tr:last-child td {
    border-bottom:0;
}

.block-drawer-transaction-table th:first-child,
.block-drawer-transaction-table td:first-child {
    text-align:left;
}

.block-drawer-transaction-table th:last-child,
.block-drawer-transaction-table td:last-child {
    text-align:right;
}

.block-drawer-transaction-table td {
    color:#475467;
    font-size:0.71rem;
}

.block-drawer-transaction-table td:last-child {
    color:var(--color-ink);
    font-weight:800;
}

.block-drawer-transaction-table
tbody tr:first-child {
    background:linear-gradient(
        90deg,
        rgba(11,111,116,0.07),
        rgba(11,111,116,0.015)
    );
}

.block-drawer-transaction-table
tbody tr:first-child
td:first-child {
    color:var(--color-brand-dark);
    font-weight:750;
}

.block-drawer-transaction-table
tbody tr:first-child
td:first-child::after {
    content:"Latest";
    display:inline-flex;
    margin-left:6px;
    padding:2px 5px;
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    border-radius:999px;
    font-size:0.48rem;
    font-weight:800;
    vertical-align:middle;
}

.block-drawer-action {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:42px;
    margin-top:16px;
    gap:7px;
    border:0;
    border-radius:10px;
    font-size:0.72rem;
    font-weight:750;
    text-decoration:none;
    cursor:pointer;
}

.block-drawer-action::after {
    content:none !important;
}

.block-drawer-detail-view {
    margin-top:20px;
    padding-top:17px;
    border-top:1px solid #edf0f2;
}

.block-detail-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:13px;
}

.block-detail-heading h3 {
    margin:4px 0 0;
    color:var(--color-ink);
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:-0.025em;
}

.block-detail-transaction-list {
    display:grid;
    gap:11px;
    margin-top:11px;
}

.block-detail-transaction-card {
    overflow:hidden;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:14px;
    box-shadow:var(--shadow-soft);
}

.block-detail-transaction-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:13px 15px;
    background:#f8fafb;
    border-bottom:1px solid #edf0f2;
}

.block-detail-month-group {
    display:flex;
    align-items:center;
    gap:7px;
}

.block-detail-month-group>span {
    color:var(--color-ink);
    font-size:0.78rem;
    font-weight:750;
}

.block-detail-transaction-header>strong {
    color:var(--color-brand-dark);
    font-size:0.96rem;
    font-weight:850;
}

.block-detail-latest-badge {
    padding:3px 7px;
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    border-radius:999px;
    font-size:0.52rem;
    font-weight:800;
}

.block-detail-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:5px 15px 11px;
}

.block-detail-item {
    min-width:0;
    padding:9px 9px 9px 0;
    border-bottom:1px solid #f0f2f4;
}

.block-detail-item span {
    display:block;
    color:var(--color-subtle);
    font-size:0.56rem;
    font-weight:750;
    letter-spacing:0.025em;
    text-transform:uppercase;
}

.block-detail-item strong {
    display:block;
    margin-top:4px;
    color:#475467;
    font-size:0.72rem;
    font-weight:650;
    line-height:1.4;
}

.block-detail-item:last-child {
    grid-column:1 / -1;
}

.block-drawer-detail-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:16px;
    padding-top:15px;
    border-top:1px solid #edf0f2;
}

.block-detail-secondary-action,
.block-detail-standalone-link {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:8px 11px;
    border-radius:10px;
    font-size:0.68rem;
    font-weight:750;
    text-decoration:none;
    cursor:pointer;
}

.block-detail-secondary-action {
    background:#ffffff;
    color:#475467;
    border:1px solid var(--color-border-strong);
}

.block-detail-standalone-link {
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    border:1px solid #d2e8e6;
}

.building-page {
    width:100%;
    max-width:var(--site-max-width);
    margin:0 auto;
    padding:27px 28px 80px;
}

.building-page-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:17px;
}

.building-back-link,
.building-copy-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:7px 10px;
    gap:7px;
    border-radius:9px;
    font-size:0.7rem;
    font-weight:750;
}

.building-back-link {
    color:var(--color-brand-dark);
    text-decoration:none;
}

.building-back-link:hover {
    background:var(--color-brand-soft);
}

.building-copy-link {
    background:#ffffff;
    color:#475467;
    border:1px solid var(--color-border-strong);
    cursor:pointer;
}

.building-status {
    padding:18px;
    background:#ffffff;
    color:var(--color-muted);
    border:1px solid var(--color-border);
    border-radius:13px;
    box-shadow:var(--shadow-card);
    font-size:0.8rem;
}

.building-status.is-error {
    background:#fffbfa;
    color:#b42318;
    border-color:#fecdca;
}

.building-hero {
    position:relative;
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(260px,330px);
    align-items:stretch;
    overflow:hidden;
    gap:28px;
    padding:31px;
    background:
        radial-gradient(
            circle at 86% 8%,
            rgba(215,238,236,0.94),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbfb 55%,
            #eef8f7 100%
        );
    border:1px solid #dce9e8;
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-card);
}

.building-hero::after {
    content:"";
    position:absolute;
    right:-120px;
    bottom:-200px;
    width:370px;
    height:370px;
    border:46px solid rgba(11,111,116,0.045);
    border-radius:50%;
    pointer-events:none;
}

.building-hero-copy {
    position:relative;
    z-index:1;
    min-width:0;
}

.building-hero h1 {
    margin:7px 0 0;
    color:var(--color-ink);
    font-size:clamp(2rem,4vw,3.05rem);
    font-weight:800;
    line-height:1.06;
    letter-spacing:-0.045em;
}

.building-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.building-meta-pill {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 9px;
    background:rgba(255,255,255,0.84);
    color:#475467;
    border:1px solid #dce4e7;
    border-radius:999px;
    font-size:0.67rem;
    font-weight:650;
}

.building-hero-description {
    max-width:650px;
    margin:16px 0 0;
    color:var(--color-muted);
    font-size:0.82rem;
    line-height:1.6;
}

.building-hero-price {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:22px;
    background:rgba(255,255,255,0.9);
    border:1px solid #cfe7e5;
    border-radius:17px;
    box-shadow:0 10px 26px rgba(16,24,40,0.07);
}

.building-hero-price>span {
    color:var(--color-muted);
    font-size:0.69rem;
    font-weight:650;
}

.building-hero-price>strong {
    margin-top:6px;
    color:var(--color-brand-dark);
    font-size:clamp(1.85rem,3.5vw,2.55rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-0.05em;
}

.building-hero-price>small {
    margin-top:7px;
    color:var(--color-muted);
    font-size:0.67rem;
}

.building-summary {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
    margin-top:15px;
}

.building-stat {
    min-width:0;
    padding:16px 17px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:14px;
    box-shadow:var(--shadow-soft);
}

.building-stat-primary {
    background:linear-gradient(
        145deg,
        #eaf7f6,
        #f6fbfb
    );
    border-color:#d1e9e7;
}

.building-stat span {
    color:var(--color-muted);
    font-size:0.64rem;
    font-weight:650;
}

.building-stat strong {
    display:block;
    overflow:hidden;
    margin-top:6px;
    color:var(--color-ink);
    font-size:clamp(1.05rem,2vw,1.35rem);
    font-weight:800;
    letter-spacing:-0.035em;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.building-stat-primary strong {
    color:var(--color-brand-dark);
}

.building-stat small {
    display:block;
    margin-top:5px;
    color:var(--color-subtle);
    font-size:0.58rem;
}

.building-transactions-section {
    margin-top:17px;
    padding:23px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:17px;
    box-shadow:var(--shadow-card);
}

.building-section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:17px;
}

.building-section-heading h2 {
    margin:4px 0 0;
    color:var(--color-ink);
    font-size:1.28rem;
    font-weight:800;
    letter-spacing:-0.03em;
}

.building-section-heading p {
    margin:5px 0 0;
    color:var(--color-muted);
    font-size:0.71rem;
}

.building-results-note {
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:4px 9px;
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    border-radius:999px;
    font-size:0.59rem;
    font-weight:750;
}

.building-table-wrapper {
    overflow-x:auto;
    border:1px solid var(--color-border);
    border-radius:13px;
}

.building-transactions-table {
    width:100%;
    min-width:1020px;
    border-collapse:collapse;
}

.building-transactions-table th,
.building-transactions-table td {
    padding:12px 13px;
    border-bottom:1px solid #edf0f2;
    text-align:left;
    white-space:nowrap;
}

.building-transactions-table th {
    background:#f8fafb;
    color:var(--color-muted);
    font-size:0.6rem;
    font-weight:800;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.building-transactions-table td {
    color:#475467;
    font-size:0.71rem;
}

.building-transactions-table
tbody tr:last-child td {
    border-bottom:0;
}

.building-transactions-table
tbody tr:hover {
    background:#fbfdfd;
}

.building-transactions-table
tbody tr.is-latest {
    background:linear-gradient(
        90deg,
        rgba(11,111,116,0.065),
        rgba(11,111,116,0.012)
    );
}

.building-month-cell {
    display:flex;
    align-items:center;
    gap:7px;
}

.building-month-cell small {
    padding:2px 6px;
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    border-radius:999px;
    font-size:0.46rem;
    font-weight:800;
}

.building-price-cell {
    color:var(--color-ink) !important;
    font-weight:800;
}

.building-data-note {
    margin-top:15px;
    padding:15px 17px;
    background:#f8fafb;
    color:var(--color-muted);
    border:1px solid #e8ecef;
    border-radius:12px;
}

.building-data-note strong {
    display:block;
    color:#475467;
    font-size:0.69rem;
}

.building-data-note p {
    max-width:900px;
    margin:4px 0 0;
    font-size:0.66rem;
    line-height:1.5;
}

.loan-page {
    width:100%;
    max-width:1060px;
    min-height:calc(100vh - var(--header-height));
    margin:0 auto;
    padding:42px 28px 80px;
}

.loan-page-header {
    max-width:790px;
    margin-bottom:30px;
}

.loan-page .page-eyebrow {
    color:var(--color-brand);
    font-size:0.7rem;
    font-weight:800;
    letter-spacing:0.055em;
    text-transform:uppercase;
}

.loan-page-header h1 {
    margin:0;
    color:var(--color-ink);
    font-size:clamp(2rem,4vw,2.75rem);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-0.045em;
}

.loan-page-header .page-description {
    max-width:760px;
    margin-top:13px;
    font-size:0.9rem;
}

.loan-section {
    width:100%;
    margin-top:18px;
    padding:28px;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:17px;
    box-shadow:var(--shadow-card);
}

.section-header {
    margin-bottom:23px;
}

.section-header h2 {
    margin:0;
    color:var(--color-ink);
    font-size:1.25rem;
    font-weight:800;
    line-height:1.3;
    letter-spacing:-0.025em;
}

.section-header p {
    max-width:740px;
    margin:7px 0 0;
    color:var(--color-muted);
    font-size:0.82rem;
    line-height:1.55;
}

.section-header-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:28px;
}

.loan-form-grid {
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);
    width:100%;
    column-gap:20px;
    row-gap:20px;
}

.loan-form-grid>* {
    min-width:0;
}

.loan-form-grid sgds-input {
    display:block;
    width:100%;
}

#property-price {
    grid-column:1 / -1;
}

.loan-input-method {
    grid-column:1 / -1;
    width:100%;
    margin:0;
    padding:0;
    border:0;
}

.loan-input-method legend {
    margin-bottom:9px;
    padding:0;
    color:#344054;
    font-size:0.78rem;
    font-weight:700;
}

#loan-amount-group {
    grid-column:1;
}

#upfront-amount-group {
    grid-column:2;
}

#interest-rate {
    grid-column:1;
}

#loan-tenure {
    grid-column:2;
}

#loan-amount-group sgds-input,
#upfront-amount-group sgds-input {
    width:100%;
}

.loan-input-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:12px;
}

.loan-radio-option {
    display:flex;
    align-items:flex-start;
    min-height:88px;
    padding:15px 16px;
    gap:11px;
    background:#ffffff;
    border:1px solid var(--color-border-strong);
    border-radius:12px;
    cursor:pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.loan-radio-option:hover {
    background:#f8fcfc;
    border-color:#90c7c5;
}

.loan-radio-option:has(input:checked) {
    background:var(--color-brand-soft);
    border-color:var(--color-brand);
    box-shadow:0 0 0 1px var(--color-brand);
}

.loan-radio-option input {
    flex:0 0 auto;
    width:17px;
    height:17px;
    margin:3px 0 0;
    accent-color:var(--color-brand);
}

.loan-radio-option span {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.loan-radio-option strong {
    color:var(--color-ink);
    font-size:0.79rem;
    font-weight:750;
    line-height:1.4;
}

.loan-radio-option small {
    color:var(--color-muted);
    font-size:0.71rem;
    line-height:1.45;
}

.repayment-list {
    display:flex;
    flex-direction:column;
    gap:12px;
}

#add-repayment {
    flex:0 0 auto;
    white-space:nowrap;
}

.repayment-row {
    display:grid;
    grid-template-columns:
        minmax(80px,0.65fr)
        minmax(80px,0.65fr)
        minmax(140px,1.2fr)
        minmax(210px,1.7fr)
        auto;
    align-items:end;
    gap:12px;
    padding:16px;
    background:#f8fafb;
    border:1px solid #e8ecef;
    border-radius:12px;
}

.repayment-row .form-group {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.repayment-row .form-group label {
    color:#475467;
    font-size:0.72rem;
    font-weight:700;
}

.repayment-row input,
.repayment-row select {
    width:100%;
    min-height:42px;
    padding:8px 10px;
    background:#ffffff;
    color:var(--color-ink);
    border:1px solid var(--color-border-strong);
    border-radius:9px;
}

.repayment-row input:focus,
.repayment-row select:focus {
    border-color:var(--color-brand);
    box-shadow:0 0 0 3px rgba(11,111,116,0.1);
}

.remove-repayment {
    min-height:42px;
    padding:8px 13px;
    background:#ffffff;
    color:var(--color-danger);
    border:1px solid #f04438;
    border-radius:9px;
    font-size:0.75rem;
    font-weight:700;
    cursor:pointer;
}

.remove-repayment:hover {
    background:var(--color-danger-soft);
}

.loan-actions {
    display:flex;
    justify-content:flex-end;
    margin-top:22px;
}

#calculate-loan {
    min-width:180px;
}

.result-comparison-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.summary-card {
    overflow:hidden;
    background:#ffffff;
    border:1px solid var(--color-border);
    border-radius:14px;
}

.summary-card-header {
    padding:17px 19px;
    background:#f8fafb;
    border-bottom:1px solid #edf0f2;
}

.summary-label {
    display:inline-block;
    margin-bottom:5px;
    color:var(--color-brand);
    font-size:0.65rem;
    font-weight:800;
    letter-spacing:0.045em;
    text-transform:uppercase;
}

.summary-card-header h3 {
    margin:0;
    color:var(--color-ink);
    font-size:0.9rem;
    font-weight:750;
}

.summary-list {
    margin:0;
    padding:5px 19px;
}

.summary-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 0;
    border-bottom:1px solid #edf0f2;
}

.summary-item:last-child {
    border-bottom:0;
}

.summary-item dt {
    color:var(--color-muted);
    font-size:0.77rem;
}

.summary-item dd {
    margin:0;
    color:var(--color-ink);
    font-size:0.9rem;
    font-weight:750;
    text-align:right;
}

.savings-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:16px;
}

.saving-card {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:104px;
    padding:17px;
    background:linear-gradient(
        145deg,
        var(--color-brand-soft),
        #f7fbfb
    );
    border:1px solid var(--color-brand-soft-strong);
    border-radius:12px;
}

.saving-card span {
    color:var(--color-muted);
    font-size:0.74rem;
}

.saving-card strong {
    margin-top:6px;
    color:var(--color-brand-dark);
    font-size:1.32rem;
    font-weight:800;
    letter-spacing:-0.03em;
}

.table-wrapper {
    overflow-x:auto;
    border:1px solid var(--color-border);
    border-radius:13px;
}

.loan-table {
    width:100%;
    min-width:900px;
    margin:0;
    border-collapse:collapse;
}

.loan-table th,
.loan-table td {
    padding:12px 14px;
    border-bottom:1px solid #edf0f2;
    text-align:right;
    white-space:nowrap;
}

.loan-table th:first-child,
.loan-table td:first-child {
    text-align:left;
}

.loan-table th {
    background:#f8fafb;
    color:var(--color-muted);
    font-size:0.68rem;
    font-weight:750;
}

.loan-table td {
    color:#475467;
    font-size:0.77rem;
}

.loan-table tbody tr:last-child td {
    border-bottom:0;
}

.loan-table tbody tr:hover {
    background:#fbfdfd;
}

.empty-table-message {
    padding:30px !important;
    color:var(--color-muted) !important;
    text-align:center !important;
}

.loan-table .partial-repayment-month {
    background:var(--color-brand-soft);
}

.loan-table .partial-repayment-month:hover {
    background:#dff0ee;
}

.loan-table .partial-repayment-month td {
    font-weight:650;
}

.loan-table
.partial-repayment-month
td:nth-child(6) {
    color:var(--color-brand-dark);
}

.loan-disclaimer {
    margin-top:18px;
    padding:16px 18px;
    background:#f8fafb;
    border:1px solid #e8ecef;
    border-radius:12px;
}

.loan-disclaimer strong {
    display:block;
    margin-bottom:4px;
    color:#475467;
    font-size:0.75rem;
}

.loan-disclaimer p {
    margin:0;
    color:var(--color-muted);
    font-size:0.71rem;
    line-height:1.55;
}

.chart-container {
    position:relative;
    width:100%;
    height:420px;
}

.mobile-bottom-nav {
    display:none !important;
}

.mobile-bottom-nav-link,
.mobile-bottom-nav-item {
    text-decoration:none;
}

/* =====================================================================
   GLOBAL DATA FOOTER
   ===================================================================== */

.global-data-footer {
    position:relative;

    z-index:1100;

    display:flex;

    align-items:center;

    width:100%;

    height:var(--global-footer-height);

    min-height:var(--global-footer-height);

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-top:
        1px solid
        var(--color-border);

    color:
        var(--color-muted);
}


.global-data-footer-inner {
    display:flex;

    align-items:center;

    width:100%;

    min-width:0;

    padding:
        0
        16px;

    gap:5px;

    font-size:0.66rem;

    line-height:1.3;

    white-space:nowrap;
}


.global-data-footer a {
    color:
        #475467;

    font-weight:650;

    text-decoration:none;
}


.global-data-footer a:hover {
    color:
        var(--color-brand-dark);

    text-decoration:underline;

    text-underline-offset:2px;
}


.global-data-footer-separator {
    color:
        #c0c7d0;
}


.global-data-footer-spacer {
    flex:1 1 auto;
}


.global-data-footer-independent {
    flex:0 0 auto;

    color:
        var(--color-subtle);
}

.global-data-footer-contact {
    flex:0 0 auto;
    color:var(--color-muted);
}

.global-data-footer-contact a {
    color:#475467;
    font-weight:650;
}

@media (min-width:761px) and (max-width:1050px) {

    :root {
        --explorer-sidebar-width:300px;
    }

    .explore-sidebar-scroll {
        padding:21px 18px 25px;
    }

    .transaction-controls {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .building-page {
        padding-right:22px;
        padding-left:22px;
    }

    .building-hero {
        grid-template-columns:minmax(0,1fr) 290px;
    }

    .loan-page {
        padding-right:24px;
        padding-left:24px;
    }
}

@media (max-width:900px) {

    .building-hero {
        grid-template-columns:1fr;
    }

    .building-summary {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .loan-form-grid {
        grid-template-columns:1fr;
    }

    #property-price,
    .loan-input-method,
    #loan-amount-group,
    #upfront-amount-group,
    #interest-rate,
    #loan-tenure {
        grid-column:1;
    }

    .loan-input-options {
        grid-template-columns:1fr;
    }

    .result-comparison-grid {
        grid-template-columns:1fr;
    }

    .savings-grid {
        grid-template-columns:1fr;
    }

    .repayment-row {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:760px) {

    .sidebar-toggle {
        display:none;
    }

    body {
        padding-bottom:70px;
    }

    .site-shell {
        padding-right:15px;
        padding-left:15px;
    }

    .site-header-inner,
    .site-brand-inner {
        min-height:62px;
    }

    .site-brand-mark {
        display:grid;
        place-items:center;
        flex:0 0 auto;
        width:38px;
        height:38px;
        overflow:hidden;
        border-radius:11px;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.22),
            0 5px 12px rgba(11,111,116,0.18);
    }

    .site-brand-mark img {
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    .site-brand-text strong {
        font-size:0.82rem;
    }

    .site-brand-text small {
        display:none;
    }

    .site-header-inner>.site-nav,
    .site-header>.site-nav {
        display:none;
    }

    .market-stats-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        min-height:0;
    }

    .market-stat {
        min-height:73px;
        padding:13px 15px;
        border-bottom:1px solid #edf0f2;
    }

    .market-stat:nth-child(2),
    .market-stat:nth-child(4) {
        border-right:0;
    }

    .market-stat:nth-child(3),
    .market-stat:nth-child(4) {
        border-bottom:0;
    }

    .market-stat strong {
        font-size:1.03rem;
    }

    .explorer-page,
    body:has(#market-stats-bar:not([hidden]))
    .explorer-page {
        height:auto;
        min-height:0;
    }

    .explorer-layout {
        display:block;
        height:auto;
    }

    .explore-sidebar {
        width:100%;
        min-width:0;
        height:auto;
        border-right:0;
        border-bottom:1px solid var(--color-border);
    }

    .explore-sidebar-scroll {
        height:auto;
        overflow:visible;
        padding:17px 15px;
    }

    .explore-sidebar-header {
        margin-bottom:15px;
    }

    .explore-sidebar-header h1 {
        font-size:1.12rem;
    }

    .explore-sidebar-header>p:last-child {
        display:none;
    }

    .explore-primary-search {
        display:grid;
        grid-template-columns:minmax(0,1fr) 118px;
        align-items:end;
        gap:8px;
    }

    .explore-filter-section {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        margin-top:15px;
        padding-top:15px;

        /*
           Remove desktop narrowing on phones.
        */
        padding-right:0;
    }

    .explore-filter-section
    .explore-section-label {
        grid-column:1 / -1;
    }

    .explore-view-section {
        margin-top:15px;
        padding-top:15px;
    }

    .explore-search-meta {
        display:none;
    }

    .explorer-stage,
    .search-result-workspace,
    .map-results-view {
        height:600px;
        min-height:600px;
    }

    #nearby-map,
    #nearby-map.leaflet-container {
        height:600px !important;
        min-height:600px;
    }

    .map-floating-location {
        top:12px;
        left:12px;
    }

    .map-list-drawer-button {
        right:12px;
        bottom:14px;
    }

    .list-results-view {
        height:auto;
        min-height:600px;
        padding:18px 12px 24px;
    }

    .transaction-toolbar {
        flex-direction:column;
        align-items:stretch;
    }

    .transaction-controls {
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:11px;
    }

    .transaction-filter-actions {
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .table-container {
        overflow:visible;
        background:transparent;
        border:0;
    }

    .transactions-table {
        display:block;
        width:100%;
        min-width:0;
    }

    .transactions-table thead {
        display:none;
    }

    .transactions-table tbody {
        display:grid;
        gap:10px;
    }

    .transactions-table tbody tr {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:13px;
        background:#ffffff;
        border:1px solid var(--color-border);
        border-radius:14px;
        box-shadow:var(--shadow-soft);
    }

    .transactions-table td {
        display:flex;
        flex-direction:column;
        min-width:0;
        padding:7px 5px;
        gap:2px;
        border:0;
        font-size:0.72rem;
        white-space:normal;
    }

    .transactions-table td::before {
        color:var(--color-subtle);
        font-size:0.57rem;
        font-weight:750;
        letter-spacing:0.03em;
        text-transform:uppercase;
    }

    .transactions-table td:nth-child(1)::before {
        content:"Month";
    }

    .transactions-table td:nth-child(2)::before {
        content:"Address";
    }

    .transactions-table td:nth-child(3)::before {
        content:"Postal code";
    }

    .transactions-table td:nth-child(4)::before {
        content:"Distance";
    }

    .transactions-table td:nth-child(5)::before {
        content:"Storey";
    }

    .transactions-table td:nth-child(6)::before {
        content:"Area";
    }

    .transactions-table td:nth-child(7)::before {
        content:"Sq ft";
    }

    .transactions-table td:nth-child(8)::before {
        content:"Flat model";
    }

    .transactions-table td:nth-child(9)::before {
        content:"Remaining lease";
    }

    .transactions-table td:nth-child(10)::before {
        content:"Resale price";
    }

    .transactions-table td:nth-child(2),
    .transactions-table td:nth-child(10) {
        grid-column:1 / -1;
    }

    .transactions-table td:nth-child(10) {
        margin-top:2px;
        padding-top:11px;
        border-top:1px solid #edf0f2;
        color:var(--color-brand-dark) !important;
        font-size:1rem;
        font-weight:800;
    }

    .list-results-view.map-drawer-mode,
    .block-drawer,
    .block-drawer.is-expanded {
        position:absolute;
        z-index:900;
        top:auto;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        min-height:0;
        max-height:82%;
        overflow-y:auto;
        padding:
            18px
            14px
            calc(
                19px
                + env(safe-area-inset-bottom)
            );
        border-right:0;
        border-bottom:0;
        border-left:0;
        border-radius:22px 22px 0 0;
        box-shadow:
            0 -12px 34px
            rgba(16,24,40,0.18);
    }

    .block-drawer.is-expanded {
        max-height:90%;
    }

    .block-drawer-detail-actions {
        grid-template-columns:1fr;
    }

    .building-page {
        padding:16px 12px 88px;
    }

    .building-page-toolbar {
        margin-bottom:12px;
    }

    .building-hero {
        gap:17px;
        padding:21px 17px;
        border-radius:18px;
    }

    .building-hero h1 {
        font-size:clamp(1.7rem,9vw,2.35rem);
    }

    .building-hero-price {
        padding:17px;
    }

    .building-summary {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .building-stat {
        padding:13px;
    }

    .building-transactions-section {
        padding:17px 12px;
        border-radius:15px;
    }

    .building-section-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:9px;
    }

    .building-table-wrapper {
        overflow:visible;
        border:0;
    }

    .building-transactions-table {
        display:block;
        width:100%;
        min-width:0;
    }

    .building-transactions-table thead {
        display:none;
    }

    .building-transactions-table tbody {
        display:grid;
        gap:10px;
    }

    .building-transactions-table tbody tr {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:13px;
        background:#ffffff;
        border:1px solid var(--color-border);
        border-radius:14px;
        box-shadow:var(--shadow-soft);
    }

    .building-transactions-table td {
        display:flex;
        flex-direction:column;
        min-width:0;
        padding:7px 5px;
        gap:3px;
        border:0;
        white-space:normal;
    }

    .building-transactions-table td::before {
        content:attr(data-label);
        color:var(--color-subtle);
        font-size:0.54rem;
        font-weight:750;
        letter-spacing:0.035em;
        text-transform:uppercase;
    }

    .building-transactions-table td:first-child,
    .building-transactions-table td:last-child {
        grid-column:1 / -1;
    }

    .building-transactions-table td:last-child {
        margin-top:2px;
        padding-top:10px;
        border-top:1px solid #edf0f2;
        color:var(--color-brand-dark) !important;
        font-size:0.95rem;
    }

    .loan-page {
        padding:28px 14px 88px;
    }

    .loan-page-header {
        margin-bottom:23px;
    }

    .loan-page-header h1 {
        font-size:2rem;
    }

    .loan-section {
        padding:19px;
        border-radius:14px;
    }

    .section-header-row {
        flex-direction:column;
        gap:16px;
    }

    #add-repayment {
        width:100%;
    }

    .repayment-row {
        grid-template-columns:1fr;
    }

    .loan-actions {
        justify-content:stretch;
    }

    #calculate-loan {
        width:100%;
    }

    .summary-item {
        align-items:flex-start;
    }

    .mobile-bottom-nav {
        position:fixed;
        z-index:1300;
        right:10px;
        bottom:10px;
        left:10px;
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        min-height:58px;
        padding:5px;
        background:rgba(16,24,40,0.94);
        border:1px solid rgba(255,255,255,0.12);
        border-radius:18px;
        box-shadow:
            0 14px 34px
            rgba(16,24,40,0.28);
        backdrop-filter:blur(16px);
    }

    .mobile-bottom-nav-link,
    .mobile-bottom-nav-item {
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        min-width:0;
        gap:7px;
        color:#cbd5e1;
        border-radius:13px;
        font-size:0.68rem;
        font-weight:700;
        text-decoration:none;
    }

    .mobile-bottom-nav-link.active,
    .mobile-bottom-nav-item.active,
    .mobile-bottom-nav-link[aria-current="page"],
    .mobile-bottom-nav-item[aria-current="page"] {
        background:rgba(255,255,255,0.12);
        color:#ffffff;
    }

    .mobile-nav-icon {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:18px;
        height:18px;
    }

    .mobile-nav-icon svg {
        width:100%;
        height:100%;
    }

    .global-data-footer {
    height:auto;

    min-height:0;
}


    .global-data-footer-inner {
        flex-wrap:wrap;

        padding:
            10px
            15px;

        gap:
            4px
            5px;

        font-size:
            0.62rem;

        white-space:normal;
    }


    .global-data-footer-spacer {
        display:none;
    }


    .global-data-footer-independent {
        width:100%;

        margin-top:2px;
    }
}

@media (max-width:430px) {

    .explore-primary-search {
        grid-template-columns:1fr;
    }

    .explore-filter-section {
        grid-template-columns:1fr;
    }

    .explore-filter-section
    .explore-section-label {
        grid-column:1;
    }

    .transaction-controls,
    .list-results-view.map-drawer-mode
    .transaction-controls {
        grid-template-columns:1fr;
    }

    .explorer-stage,
    .search-result-workspace,
    .map-results-view,
    #nearby-map,
    #nearby-map.leaflet-container {
        height:540px !important;
        min-height:540px;
    }

    .map-list-drawer-button {
        right:10px;
        bottom:12px;
    }

    .map-list-drawer-button small {
        display:none;
    }

    .block-detail-grid {
        grid-template-columns:1fr;
    }

    .block-detail-item:last-child {
        grid-column:1;
    }

    .building-meta-pill {
        font-size:0.63rem;
    }

    .loan-input-options {
        grid-template-columns:1fr;
    }

    .building-summary {
        grid-template-columns:1fr 1fr;
    }
}

/* =====================================================================
   DATA & SOURCES PAGE
   ===================================================================== */

.sources-page {
    width:100%;
    max-width:var(--site-max-width);
    margin:0 auto;
    padding:34px 28px 70px;
}


/* ---------------------------------------------------------------------
   Page heading
   --------------------------------------------------------------------- */

.sources-page-header {
    max-width:820px;
    margin-bottom:26px;
}


.sources-page-header h1 {
    margin:0;
    color:var(--color-ink);
    font-size:clamp(2rem,4vw,2.75rem);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-0.045em;
}


.sources-page-header .page-description {
    margin-top:12px;
}


/* ---------------------------------------------------------------------
   Main two-column layout
   --------------------------------------------------------------------- */

.sources-layout {
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    align-items:start;
    gap:22px;
}


/* =====================================================================
   SOURCES SIDEBAR
   ===================================================================== */

.sources-sidebar {
    position:sticky;

    top:
        calc(
            var(--header-height)
            + 18px
        );

    overflow:hidden;

    background:#ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:15px;

    box-shadow:
        var(--shadow-soft);
}


.sources-sidebar-nav {
    padding:10px;
}


.sources-nav-group {
    padding:8px 0;
}


.sources-nav-group + .sources-nav-group {
    margin-top:4px;
    padding-top:14px;
    border-top:1px solid #edf0f2;
}


.sources-nav-label {
    margin:0 8px 7px;
    color:var(--color-subtle);
    font-size:0.59rem;
    font-weight:800;
    letter-spacing:0.055em;
    text-transform:uppercase;
}


.sources-nav-link {
    display:flex;
    align-items:center;
    width:100%;
    min-height:36px;
    padding:7px 10px;
    color:#475467;
    border-radius:9px;
    font-size:0.7rem;
    font-weight:650;
    text-decoration:none;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.sources-nav-link:hover {
    background:#f5f7f8;
    color:var(--color-ink);
}


.sources-nav-link.active {
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    font-weight:750;
}


/* =====================================================================
   MAIN SOURCES CONTENT
   ===================================================================== */

.sources-content {
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:14px;
}


/* ---------------------------------------------------------------------
   Individual content sections
   --------------------------------------------------------------------- */

.sources-section {
    scroll-margin-top:
        calc(
            var(--header-height)
            + 22px
        );

    padding:24px 26px;

    background:#ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:16px;

    box-shadow:
        var(--shadow-card);
}


.sources-section-heading {
    max-width:780px;
}


.sources-section-kicker {
    margin:0;
    color:var(--color-brand);
    font-size:0.63rem;
    font-weight:800;
    letter-spacing:0.055em;
    text-transform:uppercase;
}


.sources-section-heading h2 {
    margin:4px 0 0;
    color:var(--color-ink);
    font-size:1.2rem;
    font-weight:800;
    line-height:1.3;
    letter-spacing:-0.03em;
}


.sources-section-heading > p:last-child {
    margin:9px 0 0;
    color:var(--color-muted);
    font-size:0.76rem;
    line-height:1.65;
}


/* =====================================================================
   OVERVIEW
   ===================================================================== */

.sources-overview {
    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(215,238,236,0.8),
            transparent 32%
        ),
        #ffffff;
    border-color:#d9e9e8;
}


.sources-overview-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    margin-top:20px;
}


.sources-overview-stat {
    min-width:0;
    padding:13px 14px;
    background:rgba(255,255,255,0.82);
    border:1px solid #e1e9eb;
    border-radius:11px;
}


.sources-overview-stat strong {
    display:block;
    overflow:hidden;
    color:var(--color-brand-dark);
    font-size:0.88rem;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.sources-overview-stat span {
    display:block;
    margin-top:4px;
    color:var(--color-muted);
    font-size:0.6rem;
}


/* =====================================================================
   DATASET DETAILS
   ===================================================================== */

.sources-dataset-highlight {
    margin-top:18px;
    padding:13px 15px;
    background:linear-gradient(
        145deg,
        var(--color-brand-soft),
        #f8fcfc
    );
    border:1px solid var(--color-brand-soft-strong);
    border-radius:11px;
}


.sources-dataset-highlight span {
    display:block;
    color:var(--color-muted);
    font-size:0.57rem;
    font-weight:800;
    letter-spacing:0.04em;
    text-transform:uppercase;
}


.sources-dataset-highlight strong {
    display:block;
    margin-top:4px;
    color:var(--color-brand-dark);
    font-size:0.76rem;
    font-weight:750;
    line-height:1.5;
}


.sources-detail-list {
    margin:16px 0 0;
}


.sources-detail-list > div {
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    gap:18px;
    padding:10px 0;
    border-bottom:1px solid #edf0f2;
}


.sources-detail-list dt {
    color:var(--color-muted);
    font-size:0.63rem;
    font-weight:700;
}


.sources-detail-list dd {
    margin:0;
    color:#475467;
    font-size:0.69rem;
    line-height:1.55;
}


.sources-code-value {
    overflow-wrap:anywhere;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size:0.64rem !important;
}


/* =====================================================================
   LINKS
   ===================================================================== */

.sources-external-link {
    display:inline-flex;
    align-items:center;
    margin-top:14px;
    color:var(--color-brand-dark);
    font-size:0.67rem;
    font-weight:750;
    text-decoration:none;
}


.sources-external-link:hover {
    text-decoration:underline;
    text-underline-offset:3px;
}


.sources-link-row {
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}


/* =====================================================================
   CALLOUTS
   ===================================================================== */

.sources-callout {
    margin-top:18px;
    padding:14px 15px;
    background:#f8fafb;
    border:1px solid #e7ebee;
    border-radius:11px;
}


.sources-callout-warning {
    background:#fffaf5;
    border-color:#f2ddc8;
}


.sources-callout strong {
    display:block;
    color:var(--color-ink);
    font-size:0.67rem;
    font-weight:750;
}


.sources-callout p {
    margin:5px 0 0;
    color:var(--color-muted);
    font-size:0.65rem;
    line-height:1.6;
}


/* =====================================================================
   OPEN DATA LICENCE
   ===================================================================== */

.sources-licence-box {
    margin-top:17px;
    padding:15px 17px;
    background:var(--color-brand-soft);
    border:1px solid var(--color-brand-soft-strong);
    border-radius:11px;
}


.sources-licence-box span {
    color:var(--color-brand-dark);
    font-size:0.6rem;
    font-weight:800;
    letter-spacing:0.04em;
    text-transform:uppercase;
}


.sources-licence-box p {
    margin:5px 0 0;
    color:#475467;
    font-size:0.69rem;
    line-height:1.6;
}


/* =====================================================================
   ONEMAP
   ===================================================================== */

.sources-onemap {
    display:inline-flex;
    align-items:center;
    margin-top:17px;
    padding:11px 13px;
    gap:9px;
    background:#f8fafb;
    border:1px solid var(--color-border);
    border-radius:11px;
}


.sources-onemap img {
    width:27px;
    height:27px;
}


.sources-onemap div {
    display:flex;
    flex-direction:column;
}


.sources-onemap strong {
    color:var(--color-ink);
    font-size:0.69rem;
}


.sources-onemap span {
    margin-top:1px;
    color:var(--color-muted);
    font-size:0.6rem;
}


/* =====================================================================
   PROCESS
   ===================================================================== */

.sources-process-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-top:18px;
}


.sources-process-item {
    display:flex;
    align-items:flex-start;
    min-width:0;
    padding:13px;
    gap:11px;
    background:#f8fafb;
    border:1px solid #e8ecef;
    border-radius:11px;
}


.sources-process-item > span {
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:27px;
    height:27px;
    background:var(--color-brand-soft);
    color:var(--color-brand-dark);
    border-radius:7px;
    font-size:0.55rem;
    font-weight:850;
}


.sources-process-item strong {
    display:block;
    color:var(--color-ink);
    font-size:0.68rem;
}


.sources-process-item p {
    margin:4px 0 0;
    color:var(--color-muted);
    font-size:0.63rem;
    line-height:1.5;
}


/* =====================================================================
   LIMITATIONS
   ===================================================================== */

.sources-limitations {
    margin:15px 0 0;
    padding-left:20px;
    color:var(--color-muted);
    font-size:0.69rem;
    line-height:1.7;
}


.sources-limitations li + li {
    margin-top:5px;
}


/* =====================================================================
   TECHNOLOGY
   ===================================================================== */

.sources-tech-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-top:17px;
}


.sources-tech-grid > div {
    padding:12px 14px;
    background:#f8fafb;
    border:1px solid #e7ebee;
    border-radius:10px;
}


.sources-tech-grid strong {
    display:block;
    color:var(--color-ink);
    font-size:0.68rem;
}


.sources-tech-grid span {
    display:block;
    margin-top:3px;
    color:var(--color-muted);
    font-size:0.61rem;
}


/* =====================================================================
   INDEPENDENCE
   ===================================================================== */

.sources-independence {
    background:
        radial-gradient(
            circle at top right,
            rgba(215,238,236,0.85),
            transparent 35%
        ),
        #ffffff;
    border-color:#d8e9e7;
}


.sources-independence > p {
    max-width:800px;
    margin:13px 0 0;
    color:var(--color-muted);
    font-size:0.71rem;
    line-height:1.65;
}


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width:900px) {

    .sources-layout {
        grid-template-columns:180px minmax(0,1fr);
        gap:16px;
    }


    .sources-overview-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


@media (max-width:760px) {

    .sources-page {
        padding:
            26px
            14px
            90px;
    }


    .sources-page-header {
        margin-bottom:18px;
    }


    .sources-layout {
        display:block;
    }


    .sources-sidebar {
        position:relative;
        top:auto;
        margin-bottom:14px;
    }


    .sources-sidebar-nav {
        display:flex;
        overflow-x:auto;
        padding:8px;
        gap:5px;
        scrollbar-width:none;
    }


    .sources-sidebar-nav::-webkit-scrollbar {
        display:none;
    }


    .sources-nav-group {
        display:flex;
        flex:0 0 auto;
        padding:0;
        gap:5px;
    }


    .sources-nav-group + .sources-nav-group {
        margin:0;
        padding:0;
        border:0;
    }


    .sources-nav-label {
        display:none;
    }


    .sources-nav-link {
        flex:0 0 auto;
        width:auto;
        min-height:34px;
        padding:7px 10px;
        white-space:nowrap;
    }


    .sources-section {
        padding:18px;
    }


    .sources-detail-list > div {
        grid-template-columns:1fr;
        gap:3px;
    }


    .sources-process-list {
        grid-template-columns:1fr;
    }


    .sources-tech-grid {
        grid-template-columns:1fr;
    }

}


@media (max-width:430px) {

    .sources-overview-grid {
        grid-template-columns:1fr 1fr;
    }


    .sources-section {
        border-radius:14px;
    }

}

/* =====================================================================
   LOAN CALCULATOR - PORTAL LAYOUT
   ===================================================================== */


/* ---------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------- */

.loan-page.loan-page-shell {
    width:100%;
    max-width:var(--site-max-width);
    margin:0 auto;
    padding:34px 28px 70px;
}


/* ---------------------------------------------------------------------
   Page heading
   --------------------------------------------------------------------- */

.loan-page-header-redesign {
    max-width:820px;
    margin-bottom:26px;
}


.loan-page-header-redesign h1 {
    margin:0;
    color:var(--color-ink);
    font-size:clamp(2rem,4vw,2.75rem);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-0.045em;
}


.loan-page-header-redesign .page-description {
    margin-top:12px;
}


/* =====================================================================
   TWO-COLUMN LAYOUT
   ===================================================================== */

.loan-layout {
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    align-items:start;
    gap:22px;
}


.loan-content {
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:14px;
}


/* =====================================================================
   SIDEBAR
   ===================================================================== */

.loan-sidebar {
    position:sticky;

    top:
        calc(
            var(--header-height)
            + 18px
        );

    overflow:hidden;

    background:#ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:15px;

    box-shadow:
        var(--shadow-soft);
}


.loan-sidebar-nav {
    padding:10px;
}


.loan-nav-group {
    padding:8px 0;
}


.loan-nav-group + .loan-nav-group {
    margin-top:4px;
    padding-top:14px;

    border-top:
        1px solid
        #edf0f2;
}


.loan-nav-label {
    margin:0 8px 7px;

    color:
        var(--color-subtle);

    font-size:0.59rem;
    font-weight:800;

    letter-spacing:0.055em;

    text-transform:uppercase;
}


.loan-nav-link {
    display:flex;
    align-items:center;

    width:100%;
    min-height:36px;

    padding:7px 10px;

    color:#475467;

    border-radius:9px;

    font-size:0.7rem;
    font-weight:650;

    text-decoration:none;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.loan-nav-link:hover {
    background:#f5f7f8;
    color:var(--color-ink);
}


.loan-nav-link.active {
    background:
        var(--color-brand-soft);

    color:
        var(--color-brand-dark);

    font-weight:750;
}


/* ---------------------------------------------------------------------
   Sidebar planning note
   --------------------------------------------------------------------- */

.loan-sidebar-note {
    margin:6px 0 0;
    padding:14px 10px 10px;

    border-top:
        1px solid
        #edf0f2;
}


.loan-sidebar-note > span {
    display:block;

    color:
        var(--color-brand);

    font-size:0.57rem;
    font-weight:800;

    letter-spacing:0.055em;

    text-transform:uppercase;
}


.loan-sidebar-note p {
    margin:6px 0 0;

    color:
        var(--color-muted);

    font-size:0.62rem;
    line-height:1.55;
}


/* =====================================================================
   CONTENT CARDS
   ===================================================================== */

.loan-content .loan-content-section {
    scroll-margin-top:
        calc(
            var(--header-height)
            + 22px
        );

    margin:0;

    padding:24px 26px;

    background:#ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:16px;

    box-shadow:
        var(--shadow-card);
}


/* ---------------------------------------------------------------------
   Section headings
   --------------------------------------------------------------------- */

.loan-content-section .section-header {
    margin-bottom:20px;
}


.loan-content-section .section-header h2 {
    margin:4px 0 0;

    color:
        var(--color-ink);

    font-size:1.2rem;
    font-weight:800;

    line-height:1.3;
    letter-spacing:-0.03em;
}


.loan-content-section .section-header > p:last-child,
.loan-content-section .section-header > div > p:last-child {
    margin:8px 0 0;

    color:
        var(--color-muted);

    font-size:0.72rem;
    line-height:1.6;
}


.loan-section-kicker {
    margin:0;

    color:
        var(--color-brand);

    font-size:0.61rem;
    font-weight:800;

    letter-spacing:0.055em;

    text-transform:uppercase;
}


/* =====================================================================
   LOAN DETAILS
   ===================================================================== */

.loan-content .loan-form-grid {
    margin-top:0;
}


.loan-content .loan-input-method {
    border:
        1px solid
        #e4e9ec;

    border-radius:12px;

    background:#f8fafb;
}


.loan-content .loan-radio-option {
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}


.loan-content .loan-radio-option:hover {
    border-color:
        #badbd8;

    background:
        #f7fbfb;
}


/* =====================================================================
   PARTIAL REPAYMENTS
   ===================================================================== */

.loan-section-empty-hint {
    display:flex;
    align-items:flex-start;

    margin-top:14px;

    padding:11px 13px;

    gap:10px;

    background:#f8fafb;

    border:
        1px solid
        #e7ebee;

    border-radius:10px;
}


.loan-section-empty-hint > span {
    flex:0 0 auto;

    padding:3px 7px;

    background:
        var(--color-brand-soft);

    color:
        var(--color-brand-dark);

    border-radius:999px;

    font-size:0.55rem;
    font-weight:750;
}


.loan-section-empty-hint p {
    margin:1px 0 0;

    color:
        var(--color-muted);

    font-size:0.62rem;
    line-height:1.5;
}


/* =====================================================================
   CALCULATE PANEL
   ===================================================================== */

.loan-calculate-panel {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    padding:17px 20px;

    background:
        linear-gradient(
            135deg,
            var(--color-brand-soft),
            #f7fbfb
        );

    border:
        1px solid
        var(--color-brand-soft-strong);

    border-radius:14px;
}


.loan-calculate-panel strong {
    display:block;

    color:
        var(--color-brand-dark);

    font-size:0.75rem;
    font-weight:800;
}


.loan-calculate-panel p {
    margin:4px 0 0;

    color:
        var(--color-muted);

    font-size:0.63rem;
    line-height:1.5;
}


.loan-calculate-panel sgds-button {
    flex:0 0 auto;
}


/* =====================================================================
   RESULTS
   ===================================================================== */

.loan-content .result-comparison-grid {
    margin-top:0;
}


.loan-content .summary-card {
    box-shadow:none;

    border:
        1px solid
        #e5eaed;
}


.loan-content .saving-card {
    box-shadow:none;

    border:
        1px solid
        #e5eaed;
}


/* =====================================================================
   AMORTISATION TABLE
   ===================================================================== */

.loan-content .table-wrapper {
    margin-top:0;

    border:
        1px solid
        #e5eaed;

    border-radius:12px;

    overflow:auto;
}


.loan-content .loan-table {
    margin:0;
}


/* =====================================================================
   DISCLAIMER
   ===================================================================== */

.loan-disclaimer-redesign {
    scroll-margin-top:
        calc(
            var(--header-height)
            + 22px
        );

    margin:0;

    padding:20px 22px;

    background:
        linear-gradient(
            145deg,
            #fffaf5,
            #ffffff
        );

    border:
        1px solid
        #f0ddc9;

    border-radius:15px;

    box-shadow:
        var(--shadow-soft);
}


.loan-disclaimer-heading {
    display:flex;
    flex-direction:column;

    gap:4px;
}


.loan-disclaimer-heading span {
    color:
        #9a5b16;

    font-size:0.58rem;
    font-weight:800;

    letter-spacing:0.055em;

    text-transform:uppercase;
}


.loan-disclaimer-heading strong {
    color:
        var(--color-ink);

    font-size:0.85rem;
    font-weight:800;
}


.loan-disclaimer-redesign > p {
    max-width:780px;

    margin:9px 0 0;

    color:
        var(--color-muted);

    font-size:0.68rem;
    line-height:1.65;
}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (max-width:900px) {

    .loan-layout {
        grid-template-columns:
            180px
            minmax(0,1fr);

        gap:16px;
    }


    .loan-content .loan-content-section {
        padding:21px;
    }

}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width:760px) {

    .loan-page.loan-page-shell {
        padding:
            26px
            14px
            90px;
    }


    .loan-page-header-redesign {
        margin-bottom:18px;
    }


    .loan-layout {
        display:block;
    }


    /* -------------------------------------------------------------
       Convert vertical sidebar into horizontal navigation
       ------------------------------------------------------------- */

    .loan-sidebar {
        position:sticky;

        top:
            var(--header-height);

        z-index:1050;

        margin-bottom:14px;

        border-radius:12px;
    }


    .loan-sidebar-nav {
        display:flex;

        overflow-x:auto;

        padding:8px;

        gap:5px;

        background:
            rgba(255,255,255,0.98);

        scrollbar-width:none;
    }


    .loan-sidebar-nav::-webkit-scrollbar {
        display:none;
    }


    .loan-nav-group {
        display:flex;

        flex:0 0 auto;

        padding:0;

        gap:5px;
    }


    .loan-nav-group + .loan-nav-group {
        margin:0;
        padding:0;

        border:0;
    }


    .loan-nav-label,
    .loan-sidebar-note {
        display:none;
    }


    .loan-nav-link {
        flex:0 0 auto;

        width:auto;

        min-height:34px;

        padding:7px 10px;

        white-space:nowrap;
    }


    /* -------------------------------------------------------------
       Main cards
       ------------------------------------------------------------- */

    .loan-content .loan-content-section {
        scroll-margin-top:
            calc(
                var(--header-height)
                + 58px
            );

        padding:18px;

        border-radius:14px;
    }


    .loan-disclaimer-redesign {
        scroll-margin-top:
            calc(
                var(--header-height)
                + 58px
            );

        padding:18px;
    }


    /* -------------------------------------------------------------
       Calculate action
       ------------------------------------------------------------- */

    .loan-calculate-panel {
        align-items:stretch;
        flex-direction:column;

        padding:16px;
    }


    .loan-calculate-panel sgds-button {
        width:100%;
    }

}


/* =====================================================================
   SMALL MOBILE
   ===================================================================== */

@media (max-width:430px) {

    .loan-page-header-redesign h1 {
        font-size:1.85rem;
    }


    .loan-content .loan-content-section {
        padding:16px;
    }


    .loan-section-empty-hint {
        flex-direction:column;
        gap:7px;
    }

}

/* =====================================================================
   LOAN CALCULATOR - WIDE DESKTOP WORKSPACE
   ===================================================================== */

/*
 * The calculator benefits from more horizontal space than normal
 * information pages such as Data & Sources.
 */
@media (min-width:1100px) {

    /* -------------------------------------------------------------
       Expand the entire calculator workspace
       ------------------------------------------------------------- */

    .loan-page.loan-page-shell {
        width:100%;
        max-width:1540px;

        padding-left:28px;
        padding-right:28px;
    }


    /* -------------------------------------------------------------
       Keep the navigation sidebar compact
       ------------------------------------------------------------- */

    .loan-layout {
        grid-template-columns:
            200px
            minmax(0,1fr);

        gap:18px;
    }


    /* -------------------------------------------------------------
       Allow main calculator area to consume all remaining width
       ------------------------------------------------------------- */

    .loan-content {
        width:100%;
        min-width:0;
    }


    .loan-content .loan-content-section {
        width:100%;
    }


    /* -------------------------------------------------------------
       Loan details
       Use more of the available horizontal space
       ------------------------------------------------------------- */

    .loan-content .loan-form-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        column-gap:18px;
        row-gap:16px;
    }


    /*
     * Loan input method is a larger choice and works better
     * spanning the entire row.
     */
    .loan-content .loan-input-method {
        grid-column:
            1 / -1;
    }


    .loan-content .loan-input-options {
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:10px;
    }


    /* -------------------------------------------------------------
       Original / revised result cards
       ------------------------------------------------------------- */

    .loan-content .result-comparison-grid {
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:12px;
    }


    .loan-content .summary-card {
        min-width:0;
    }


    /* -------------------------------------------------------------
       Savings cards
       Keep all three on one row
       ------------------------------------------------------------- */

    .loan-content .savings-grid {
        display:grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );

        gap:12px;
    }


    .loan-content .saving-card {
        min-width:0;
    }


    /* -------------------------------------------------------------
       Amortisation table
       Use the available width instead of forcing a very wide table
       ------------------------------------------------------------- */

    .loan-content .table-wrapper {
        width:100%;

        overflow-x:auto;
    }


    .loan-content .loan-table {
        width:100%;
        min-width:0;

        table-layout:fixed;
    }


    .loan-content .loan-table th,
    .loan-content .loan-table td {
        padding-left:12px;
        padding-right:12px;
    }


    /*
     * Give monetary columns slightly more space.
     */

    .loan-content .loan-table th:nth-child(1),
    .loan-content .loan-table td:nth-child(1) {
        width:8%;
    }


    .loan-content .loan-table th:nth-child(2),
    .loan-content .loan-table td:nth-child(2) {
        width:18%;
    }


    .loan-content .loan-table th:nth-child(3),
    .loan-content .loan-table td:nth-child(3) {
        width:17%;
    }


    .loan-content .loan-table th:nth-child(4),
    .loan-content .loan-table td:nth-child(4) {
        width:12%;
    }


    .loan-content .loan-table th:nth-child(5),
    .loan-content .loan-table td:nth-child(5) {
        width:12%;
    }


    .loan-content .loan-table th:nth-child(6),
    .loan-content .loan-table td:nth-child(6) {
        width:16%;
    }


    .loan-content .loan-table th:nth-child(7),
    .loan-content .loan-table td:nth-child(7) {
        width:17%;
    }

}

/* =====================================================================
   LOAN CALCULATOR - TOP HALF POLISH
   ===================================================================== */


/* =====================================================================
   LOAN DETAILS
   ===================================================================== */

/*
 * Keep the form compact enough that users can understand the
 * important loan inputs at a glance.
 */

.loan-content #loan-details .loan-form-grid {
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:18px 20px;

    align-items:start;
}


/* ---------------------------------------------------------------------
   Loan input method
   --------------------------------------------------------------------- */

.loan-content #loan-details .loan-input-method {
    grid-column:
        1 / -1;

    margin:0;
    padding:16px;

    background:#f8fafb;

    border:
        1px solid
        #e4e9ec;

    border-radius:12px;
}


.loan-content #loan-details .loan-input-method legend {
    padding:0 6px;

    color:
        var(--color-ink);

    font-size:0.68rem;
    font-weight:700;
}


.loan-content #loan-details .loan-input-options {
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:10px;

    margin-top:4px;
}


/* ---------------------------------------------------------------------
   Loan method choices
   --------------------------------------------------------------------- */

.loan-content #loan-details .loan-radio-option {
    display:flex;

    align-items:flex-start;

    min-height:86px;

    margin:0;
    padding:14px 15px;

    gap:11px;

    background:#ffffff;

    border:
        1px solid
        #dfe5e8;

    border-radius:10px;

    cursor:pointer;
}


.loan-content #loan-details .loan-radio-option:hover {
    background:#f8fcfc;

    border-color:
        var(--color-brand-soft-strong);
}


.loan-content #loan-details .loan-radio-option input {
    flex:0 0 auto;

    margin-top:3px;
}


.loan-content #loan-details .loan-radio-option > span {
    min-width:0;
}


.loan-content #loan-details .loan-radio-option strong {
    display:block;

    color:
        var(--color-ink);

    font-size:0.69rem;
    font-weight:750;

    line-height:1.4;
}


.loan-content #loan-details .loan-radio-option small {
    display:block;

    margin-top:4px;

    color:
        var(--color-muted);

    font-size:0.61rem;

    line-height:1.5;
}


/* =====================================================================
   PARTIAL REPAYMENTS
   ===================================================================== */

/*
 * Give the heading and action button enough separation so that
 * "Add repayment" feels like a secondary action rather than
 * competing with Calculate Loan.
 */

.loan-content #partial-repayments .section-header-row {
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:24px;
}


.loan-content #partial-repayments .section-header-row > div {
    max-width:680px;
}


.loan-content #partial-repayments #add-repayment {
    flex:0 0 auto;
}


/* ---------------------------------------------------------------------
   Generated repayment rows
   --------------------------------------------------------------------- */

.loan-content .repayment-list {
    display:flex;

    flex-direction:column;

    gap:10px;
}


.loan-content .repayment-row {
    display:grid;

    grid-template-columns:
        minmax(110px,0.8fr)
        minmax(110px,0.8fr)
        minmax(180px,1.4fr)
        auto;

    align-items:end;

    gap:12px;

    padding:14px;

    background:#f8fafb;

    border:
        1px solid
        #e5eaed;

    border-radius:11px;
}


.loan-content .repayment-row .form-group {
    min-width:0;
    margin:0;
}


.loan-content .repayment-row label {
    display:block;

    margin-bottom:6px;

    color:
        #475467;

    font-size:0.62rem;
    font-weight:700;
}


/* Native repayment inputs */
.loan-content .repayment-row input {
    width:100%;
    min-height:40px;

    padding:8px 10px;

    background:#ffffff;

    color:
        var(--color-ink);

    border:
        1px solid
        #d7dde1;

    border-radius:8px;

    font:inherit;
    font-size:0.69rem;
}


.loan-content .repayment-row input:focus {
    outline:none;

    border-color:
        var(--color-brand);

    box-shadow:
        0 0 0 3px
        rgba(11,111,116,0.08);
}


/* =====================================================================
   OPTIONAL MESSAGE
   ===================================================================== */

.loan-content #partial-repayments .loan-section-empty-hint {
    margin-top:12px;
}


/* =====================================================================
   CALCULATE PANEL
   ===================================================================== */

.loan-calculate-panel {
    min-height:72px;

    padding:
        15px
        20px;
}


.loan-calculate-panel > div {
    min-width:0;
}


.loan-calculate-panel strong {
    font-size:0.73rem;
}


.loan-calculate-panel p {
    max-width:620px;

    margin-top:3px;

    font-size:0.62rem;
}


/* =====================================================================
   WIDE DESKTOP
   ===================================================================== */

@media (min-width:1200px) {

    /*
     * The calculator now has considerably more width.
     * Increase the separation between the two form columns slightly.
     */

    .loan-content #loan-details .loan-form-grid {
        column-gap:24px;
    }


    /*
     * Avoid very tall method cards on wide monitors.
     */

    .loan-content #loan-details .loan-radio-option {
        min-height:78px;
    }

}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (max-width:900px) {

    .loan-content #loan-details .loan-form-grid {
        grid-template-columns:1fr;

        gap:16px;
    }


    .loan-content #loan-details .loan-input-method {
        grid-column:auto;
    }


    .loan-content #loan-details .loan-input-options {
        grid-template-columns:1fr;
    }


    .loan-content .repayment-row {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width:760px) {

    .loan-content #partial-repayments .section-header-row {
        flex-direction:column;

        gap:14px;
    }


    .loan-content #partial-repayments #add-repayment {
        width:100%;
    }


    .loan-content .repayment-row {
        grid-template-columns:1fr;

        padding:12px;
    }


    .loan-content #loan-details .loan-radio-option {
        min-height:auto;
    }


    .loan-calculate-panel {
        min-height:0;
    }

}

/* =====================================================================
   EXPLORER LOCATION AUTOCOMPLETE
   ===================================================================== */

.explore-location-search {
    position:relative;
    width:100%;
    min-width:0;
}


/* ---------------------------------------------------------------------
   Suggestions panel
   --------------------------------------------------------------------- */

.location-suggestions {
    position:absolute;

    top:
        calc(
            100%
            + 6px
        );

    left:0;
    right:0;

    z-index:1500;

    overflow-x:hidden;
    overflow-y:auto;

    max-height:320px;

    padding:5px;

    background:#ffffff;

    border:
        1px solid
        var(--color-border);

    border-radius:11px;

    box-shadow:
        0 12px 30px
        rgba(16,24,40,0.14);
}


.location-suggestions[hidden] {
    display:none;
}


/* ---------------------------------------------------------------------
   Suggestion
   --------------------------------------------------------------------- */

.location-suggestion {
    display:flex;
    align-items:center;

    width:100%;

    padding:10px 11px;

    background:transparent;

    color:
        var(--color-ink);

    border:0;
    border-radius:8px;

    text-align:left;

    cursor:pointer;

    font:inherit;

    transition:
        background 0.14s ease,
        color 0.14s ease;
}


.location-suggestion:hover,
.location-suggestion.active {
    background:
        var(--color-brand-soft);
}


.location-suggestion-content {
    display:flex;
    flex-direction:column;

    min-width:0;

    gap:2px;
}


.location-suggestion strong {
    overflow:hidden;

    color:
        var(--color-ink);

    font-size:0.68rem;
    font-weight:700;

    line-height:1.35;

    text-overflow:ellipsis;
    white-space:nowrap;
}


.location-suggestion-meta {
    color:
        var(--color-muted);

    font-size:0.58rem;
    line-height:1.35;
}


/* ---------------------------------------------------------------------
   Loading / empty message
   --------------------------------------------------------------------- */

.location-suggestion-message {
    padding:11px;

    color:
        var(--color-muted);

    font-size:0.63rem;

    line-height:1.45;
}


/* =====================================================================
   MOBILE LOCATION AUTOCOMPLETE
   ===================================================================== */

@media (max-width:760px) {

    .location-suggestions {
        max-height:260px;
    }


    .location-suggestion {
        padding:11px;
    }


    .location-suggestion strong {
        font-size:0.7rem;
    }

}

/* =====================================================================
   TRANSACTION FILTER ACTIONS
   ===================================================================== */

/*
 * The action row sits inside .transaction-controls.
 *
 * Span the complete filter panel, then use the same column structure
 * as the controls above it. In the map drawer this gives:
 *
 *   [ Apply filters ] [ Reset ]
 *
 * with each button exactly matching the width of the corresponding
 * dropdown / price input above.
 */

.transaction-filter-actions {
    grid-column:1 / -1;

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    width:100%;
    min-width:0;

    gap:10px;

    margin-top:4px;
}


/* ---------------------------------------------------------------------
   Shared button sizing
   --------------------------------------------------------------------- */

.transaction-filter-primary,
.transaction-filter-secondary {
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-width:0;
    min-height:39px;

    margin:0;
    padding:8px 10px;

    border-radius:9px;

    font:inherit;
    font-size:0.72rem;
    font-weight:700;

    line-height:1.2;

    white-space:nowrap;

    cursor:pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


/* ---------------------------------------------------------------------
   Primary action
   --------------------------------------------------------------------- */

.transaction-filter-primary {
    background:
        var(--color-brand);

    color:#ffffff;

    border:
        1px solid
        var(--color-brand);
}


.transaction-filter-primary:hover {
    background:
        var(--color-brand-dark);

    border-color:
        var(--color-brand-dark);
}


.transaction-filter-primary:active {
    transform:
        translateY(1px);
}


/* ---------------------------------------------------------------------
   Secondary action
   --------------------------------------------------------------------- */

.transaction-filter-secondary {
    background:#ffffff;

    color:#344054;

    border:
        1px solid
        var(--color-border-strong);
}


.transaction-filter-secondary:hover {
    background:#f8fafc;

    color:
        var(--color-ink);

    border-color:#98a2b3;
}


.transaction-filter-secondary:active {
    transform:
        translateY(1px);
}


/* ---------------------------------------------------------------------
   Keyboard focus
   --------------------------------------------------------------------- */

.transaction-filter-primary:focus-visible,
.transaction-filter-secondary:focus-visible {
    outline:
        3px solid
        rgba(
            11,
            111,
            116,
            0.16
        );

    outline-offset:2px;
}


/* =====================================================================
   SMALL MOBILE
   ===================================================================== */

/*
 * At <= 430px the filter controls themselves collapse to one column.
 * Stack the buttons as well so each button continues to match the width
 * of the dropdown / input above it.
 */

@media (max-width:430px) {

    .transaction-filter-actions {
        grid-template-columns:
            1fr;
    }

}

/* =====================================================================
   TRANSACTION FILTER VALIDATION
   ===================================================================== */

.transaction-filter-error {
    grid-column:
        1 / -1;

    width:100%;

    margin-top:2px;

    padding:
        9px
        11px;

    background:
        #fef3f2;

    color:
        #b42318;

    border:
        1px solid
        #fecdca;

    border-radius:8px;

    font-size:0.64rem;
    font-weight:650;

    line-height:1.45;
}


.transaction-filter-error[hidden] {
    display:none;
}


/* Invalid price fields */

.transaction-control input.is-invalid {
    border-color:
        #f04438;

    box-shadow:
        0 0 0 3px
        rgba(
            240,
            68,
            56,
            0.08
        );
}


.transaction-control input.is-invalid:focus {
    border-color:
        #d92d20;

    box-shadow:
        0 0 0 3px
        rgba(
            217,
            45,
            32,
            0.12
        );
}

/* Gap between filter panel and transaction results */
.list-results-view.map-drawer-mode
.table-container {
    margin-top:9px;
}