/* SwiftDigs site styles. Every class, id and variable starts with sd- so an agent's own embedded HTML and these styles
   leave each other alone. A theme sets the --sd- variables on .sd-site; nothing below hard-codes a colour. */

.sd-site {
    --sd-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sd-heading-font: var(--sd-font);
    --sd-text: #1d2430;
    --sd-muted: #5d6675;
    --sd-bg: #ffffff;
    --sd-surface: #f5f6f8;
    --sd-border: #dfe2e7;
    --sd-accent: #1f5fae;
    --sd-accent-text: #ffffff;
    --sd-button: var(--sd-accent);
    --sd-button-text: var(--sd-accent-text);
    --sd-link: var(--sd-accent);
    --sd-header-bg: var(--sd-bg);
    --sd-header-text: var(--sd-text);
    --sd-highlight: #e8590c;  /* the map view's mark on the listing the visitor is pointing at */
    --sd-land: #2b8a3e;       /* the map's price tags on land listings */
    --sd-problem: #8a1c13;
    --sd-problem-bg: #fdecea;
    --sd-done: #1e5631;
    --sd-done-bg: #e6f4ea;
    --sd-map-water: #dce8f2;
    --sd-map-land: #eef0ec;
    --sd-map-province: #ffffff;
    --sd-map-border: #b7bfc8;
    --sd-radius: 10px;
    --sd-radius-small: 6px;  /* buttons, fields and other small things */

    /* Spacing: compact by default, so the listing photos are as big as they can be. An agent can choose standard or
       roomy (the sd-spacing- classes below). */
    --sd-width: 1680px;      /* the widest the page content gets */
    --sd-gutter: 0.75rem;    /* the page's side margins on a narrow screen */
    --sd-gap: 0.75rem;       /* between cards and panels */
    --sd-space: 1.5rem;      /* between a page's sections */
    --sd-pad: 0.75rem;       /* inside cards and panels */
    --sd-card-min: 340px;    /* the narrowest a listing card gets; wider cards mean bigger photos */

    margin: 0;
    font-family: var(--sd-font);
    font-variant-numeric: lining-nums;  /* some of the theme fonts' numbers rise and fall otherwise, which suits no price */
    line-height: 1.55;
    color: var(--sd-text);
    background: var(--sd-bg);
    -webkit-text-size-adjust: 100%;
}

.sd-spacing-standard { --sd-width: 1320px; --sd-gutter: 1rem; --sd-gap: 1.25rem; --sd-space: 2.25rem; --sd-pad: 1rem; --sd-card-min: 270px; }
.sd-spacing-roomy { --sd-width: 1200px; --sd-gutter: 1.5rem; --sd-gap: 1.75rem; --sd-space: 3rem; --sd-pad: 1.25rem; --sd-card-min: 250px; }

/* The site's own reset: :where keeps it weaker than any class, so an agent's embedded HTML styles still win. */
:where(.sd-site) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.sd-site) :where(h1, h2, h3, p, dl, dd, figure, ul) { margin: 0; }
:where(.sd-site) :where(fieldset) { margin: 0; min-width: 0; }
:where(.sd-site) :where(img) { display: block; max-width: 100%; }
:where(.sd-site) :where(a) { color: var(--sd-link); }
:where(.sd-site) :where(h1, h2, h3, h4) { font-family: var(--sd-heading-font); }

.sd-wrap { width: min(100% - 2 * var(--sd-gutter), var(--sd-width)); margin-inline: auto; }
.sd-muted { color: var(--sd-muted); }

/* Header and footer */

.sd-header { border-bottom: 1px solid var(--sd-border); background: var(--sd-header-bg); }
.sd-header .sd-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.sd-brand { font-family: var(--sd-heading-font); font-weight: 700; font-size: 1.2rem; color: var(--sd-header-text); text-decoration: none; }
.sd-brand-logo { width: auto; height: 3rem; max-width: min(240px, 50vw); object-fit: contain; }
.sd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.sd-nav a, .sd-nav .sd-link-button { color: var(--sd-header-text); text-decoration: none; }
.sd-nav a:hover, .sd-nav .sd-link-button:hover { color: var(--sd-header-text); text-decoration: underline; }

.sd-main { padding-block: var(--sd-gap) var(--sd-space); }

.sd-footer { border-top: 1px solid var(--sd-border); background: var(--sd-surface); padding-block: var(--sd-space); font-size: 0.85rem; color: var(--sd-muted); }
.sd-footer .sd-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
/* A line below a row, the agent's choice on Your site. */
.sd-footer-line { padding-bottom: 0.75rem; border-bottom: 1px solid var(--sd-border); }
/* A logo at each end and the agent between, centred whichever logos are there. */
.sd-footer-brand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem 1.5rem; }
.sd-footer-brand-right { justify-self: end; }
.sd-footer-contact { text-align: center; }
.sd-footer-reach { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2rem; }
.sd-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; }
.sd-footer-credit { text-align: center; }
@media (max-width: 600px) {
    .sd-footer-brand { grid-template-columns: 1fr 1fr; }
    .sd-footer-contact { grid-column: 1 / -1; grid-row: 1; }
}
.sd-brokerage-logo { width: auto; height: 3rem; max-width: 240px; object-fit: contain; }

/* Shared pieces */

.sd-badge {
    display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
    background: var(--sd-accent); color: var(--sd-accent-text); font-size: 0.8rem; font-weight: 600;
}

.sd-panel { padding: var(--sd-pad); border: 1px solid var(--sd-border); border-radius: var(--sd-radius); }
.sd-panel h2 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.sd-panel > * + * { margin-top: 0.75rem; }
/* The agent and client areas: panels stand out from the page, and one inside another goes back to the page's colour. */
.sd-area .sd-panel { background: var(--sd-surface); }
.sd-area .sd-panel .sd-panel { background: var(--sd-bg); }

.sd-page-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--sd-gap); }
.sd-message { padding: 3rem 0; text-align: center; }
.sd-message h1 { margin-bottom: 0.75rem; }

/* Listing cards */

.sd-grid { display: grid; gap: var(--sd-gap); grid-template-columns: repeat(auto-fill, minmax(min(var(--sd-card-min), 100%), 1fr)); }

/* The card under the mouse (or holding keyboard focus) lifts with a small overshoot and a deeper shadow, and settles
   back when the mouse leaves. */
.sd-card {
    display: flex; flex-direction: column; border: 1px solid var(--sd-border); border-radius: var(--sd-radius); overflow: hidden;
    background: var(--sd-bg); box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.sd-card:hover, .sd-card:focus-within { transform: translateY(-6px); box-shadow: 0 14px 28px rgb(0 0 0 / 0.16), 0 4px 8px rgb(0 0 0 / 0.08); }
@media (prefers-reduced-motion: reduce) {
    .sd-card { transition: box-shadow 0.15s; }
    .sd-card:hover, .sd-card:focus-within { transform: none; }
}
.sd-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.sd-card-photo { position: relative; aspect-ratio: 4 / 3; background: var(--sd-surface); }
/* Out of the flow, or a very tall photo would stretch the box past its shape. Cropped from the middle, never squashed. */
.sd-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-card-photo .sd-badge { position: absolute; top: 0.6rem; left: 0.6rem; }
.sd-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--sd-pad); }
.sd-card-price { font-size: 1.25rem; font-weight: 700; }
.sd-card-address { font-size: 1rem; font-weight: 600; margin-top: 0.15rem; }
.sd-card-place, .sd-card-facts { color: var(--sd-muted); font-size: 0.9rem; }
.sd-card-open-house { margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--sd-link); }
/* Pushed to the card's bottom edge, so it lines up across a row of cards of different heights. */
/* The heart and thumbs-down: over a card's photo, or under the price on a listing's page. */
.sd-card { position: relative; }
.sd-reactions, .sd-reactions form { display: flex; gap: 0.35rem; }
.sd-card .sd-reactions { position: absolute; top: 0.6rem; right: 0.6rem; }
.sd-listing-price .sd-reactions { justify-content: flex-end; margin-top: 0.4rem; }
.sd-reaction {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--sd-bg) 92%, transparent); color: var(--sd-text); box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); cursor: pointer;
}
.sd-reaction svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-reaction:hover { color: var(--sd-accent); }
.sd-reaction[aria-pressed="true"] { color: var(--sd-accent); }
.sd-reaction[aria-pressed="true"] svg { fill: currentColor; }
.sd-mapview-cards .sd-reactions { display: none; }
.sd-card-gone .sd-card-body { gap: 0.4rem; padding-right: 5.5rem; }
.sd-card-gone .sd-badge-gone { margin-left: 0; }
.sd-not-interested { margin-top: var(--sd-space); }

/* Saving a search, under the search form, and the client's list of saved searches. */
.sd-save-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: var(--sd-gap); font-size: 0.95rem; }
.sd-save-search .sd-field-inline { flex: 1 1 18rem; }
.sd-save-search .sd-input { flex: 1; }
.sd-saved-searches { display: grid; gap: var(--sd-gap); max-width: 760px; }
.sd-saved-search h2 a { text-decoration: none; }
.sd-saved-search-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sd-saved-search-actions form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sd-alert-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; }

/* The agent's clients. */
.sd-client-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: var(--sd-gap); }
.sd-client-list { display: grid; gap: 0.35rem; padding-left: 1.1rem; font-size: 0.95rem; }
.sd-client-section { margin-top: var(--sd-space); }
.sd-client-section h2 { font-size: 1.2rem; margin-bottom: 0.75rem; }
.sd-client-card { display: grid; gap: 0.35rem; }
.sd-client-card > p { font-size: 0.85rem; }
.sd-client-subhead { font-size: 1rem; margin: var(--sd-gap) 0 0.75rem; }
.sd-agent-alerts { margin-top: var(--sd-gap); }
.sd-agent-notes { display: grid; gap: 0.4rem; padding: 0; list-style: none; font-size: 0.95rem; }

/* "What do you like about it?", over the page after a like. */
.sd-like-note {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 50; width: min(26rem, calc(100% - 2rem)); padding: var(--sd-pad);
    border: 1px solid var(--sd-border); border-radius: var(--sd-radius); background: var(--sd-bg); box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
}
.sd-like-note-title { font-size: 1.1rem; }
.sd-like-note-actions { display: flex; align-items: center; gap: 1rem; }
.sd-like-note-note { font-size: 0.9rem; font-style: italic; }
.sd-not-interested summary { cursor: pointer; font-weight: 600; margin-bottom: 0.75rem; }
.sd-not-interested > p { margin-bottom: var(--sd-gap); }

.sd-card-days { margin-top: auto; padding-top: 0.6rem; text-align: right; font-size: 0.8rem; color: var(--sd-muted); }
.sd-card-days strong { color: var(--sd-text); }

/* Listing page */

.sd-listing-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.5rem 2rem; margin-bottom: var(--sd-gap); }
.sd-listing-title { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; }
.sd-listing-place { color: var(--sd-muted); }
.sd-listing-price { text-align: right; }
.sd-listing-price p { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; line-height: 1.2; }

.sd-gallery { margin-bottom: var(--sd-gap); }
.sd-gallery-empty { display: grid; place-items: center; aspect-ratio: 16 / 7; border-radius: var(--sd-radius); background: var(--sd-surface); color: var(--sd-muted); }
.sd-gallery-strip {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    border-radius: var(--sd-radius); background: var(--sd-surface); scrollbar-width: thin;
}
.sd-gallery-photo { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 10; max-height: 60vh; }
.sd-gallery-photo img { width: 100%; height: 100%; object-fit: contain; }
.sd-gallery-count {
    position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.1rem 0.6rem; border-radius: 999px;
    background: rgb(0 0 0 / 0.6); color: #fff; font-size: 0.8rem;
}
.sd-gallery-thumbs { display: flex; gap: 0.4rem; overflow-x: auto; padding-top: 0.5rem; scrollbar-width: thin; }
.sd-gallery-thumbs a { flex: 0 0 88px; aspect-ratio: 4 / 3; border-radius: var(--sd-radius-small); overflow: hidden; background: var(--sd-surface); }
.sd-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.sd-gallery-thumbs a[aria-current] { outline: 3px solid var(--sd-accent); outline-offset: -3px; }
.sd-gallery-stage { position: relative; }

.sd-key-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
    border: 1px solid var(--sd-border); border-radius: var(--sd-radius); overflow: hidden; background: var(--sd-border);
    margin-bottom: var(--sd-space);
}
.sd-key-facts div { padding: 0.75rem 1rem; background: var(--sd-bg); }
.sd-key-facts dt { font-size: 0.8rem; color: var(--sd-muted); }
.sd-key-facts dd { font-size: 1.1rem; font-weight: 600; }

.sd-listing-columns { display: grid; gap: var(--sd-space); }
@media (min-width: 900px) {
    .sd-listing-columns { grid-template-columns: minmax(0, 1fr) 320px; }
    .sd-listing-side { position: sticky; top: 1rem; align-self: start; }
}
.sd-listing-side > * + * { margin-top: var(--sd-gap); }

.sd-section + .sd-section { margin-top: var(--sd-space); }
.sd-section h2 { font-size: 1.2rem; margin-bottom: 0.75rem; }
.sd-section p + p { margin-top: 0.75rem; }

.sd-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 2rem; }
.sd-facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--sd-border); }
.sd-facts dt { color: var(--sd-muted); }

.sd-open-houses { padding-left: 1.2rem; }
.sd-open-houses li + li { margin-top: 0.5rem; }

.sd-table-wrap { overflow-x: auto; }
.sd-table { width: 100%; border-collapse: collapse; }
.sd-table th, .sd-table td { padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sd-border); }
.sd-table th { font-size: 0.85rem; color: var(--sd-muted); font-weight: 600; }

.sd-courtesy { font-size: 0.95rem; }

.sd-listing-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.75rem; font-size: 0.9rem; }
.sd-breadcrumbs { margin-bottom: 0.75rem; font-size: 0.9rem; }
.sd-listing-nav .sd-breadcrumbs { margin-bottom: 0; }
.sd-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.sd-breadcrumbs li + li::before { content: "› "; color: var(--sd-muted); }
.sd-breadcrumbs [aria-current] { color: var(--sd-muted); }
.sd-back::before { content: "‹ "; }

/* Forms */

.sd-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; font-size: 0.85rem; color: var(--sd-muted); }
.sd-count { font-size: 0.8rem; color: var(--sd-muted); }
.sd-count-over { color: var(--sd-problem); }
.sd-field-inline { display: flex; align-items: center; gap: 0.5rem; }
.sd-input {
    min-height: 2.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small);
    background: var(--sd-bg); color: var(--sd-text); font: inherit; font-size: 0.95rem;
}
.sd-form { display: grid; gap: 0.75rem; }
.sd-problem { padding: 0.6rem 0.8rem; border-radius: var(--sd-radius-small); background: var(--sd-problem-bg); color: var(--sd-problem); }
.sd-done { padding: 0.6rem 0.8rem; border-radius: var(--sd-radius-small); background: var(--sd-done-bg); color: var(--sd-done); }
.sd-button[hidden] { display: none; }
.sd-button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.4rem 1.25rem;
    border: 0; border-radius: var(--sd-radius-small); cursor: pointer; text-decoration: none;
    background: var(--sd-button); color: var(--sd-button-text); font: inherit; font-weight: 600;
}

/* Search */

.sd-search-form { margin-bottom: var(--sd-gap); padding: var(--sd-pad); border-radius: var(--sd-radius); background: var(--sd-surface); }
.sd-search-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.sd-field-wide { grid-column: span 2; }
/* The property type field: drawn like the selects, its list of boxes opening over what lies below. */
/* It and the open houses box fill their row, so they line up with the selects beside them whatever the theme's font. */
.sd-field:has(> .sd-pick, > .sd-field-box) { grid-template-rows: auto 1fr; }
.sd-pick { position: relative; }
.sd-pick summary { display: flex; align-items: center; gap: 0.5rem; height: 100%; cursor: pointer; list-style: none; }
.sd-pick summary::-webkit-details-marker { display: none; }
.sd-pick summary span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sd-pick summary::after {
    content: ""; flex: none; width: 0.4rem; height: 0.4rem; margin: -0.2rem 0.15rem 0 0;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.sd-pick[open] summary::after { margin-top: 0.2rem; transform: rotate(225deg); }
.sd-pick-list {
    position: absolute; z-index: 20; top: calc(100% + 0.25rem); left: 0; display: grid; gap: 0.45rem;
    min-width: 100%; width: max-content; max-width: 20rem; padding: 0.6rem 0.75rem;
    border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small); background: var(--sd-bg);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.16); color: var(--sd-text); font-size: 0.95rem;
}
.sd-pick-list label { cursor: pointer; }
.sd-field-box { min-height: 2.5rem; color: var(--sd-text); font-size: 0.95rem; white-space: nowrap; cursor: pointer; }
.sd-search-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-top: 0.6rem; }
.sd-search-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }

.sd-map { position: relative; height: 45vh; min-height: 280px; border-radius: var(--sd-radius); overflow: hidden; background: var(--sd-surface); }
.sd-map-placeholder { display: grid; place-items: center; height: 100%; color: var(--sd-muted); }
.sd-listing-map { height: 340px; margin-top: 0.75rem; }
/* The home page's look at the map: the link lies over all of it, with its button at the foot. */
.sd-map-preview-box { position: relative; }
.sd-map-preview { height: clamp(280px, 40vh, 400px); min-height: 0; }
.sd-map-preview-link { position: absolute; inset: 0; z-index: 1; display: grid; place-items: end center; padding: var(--sd-pad) var(--sd-pad) 1.5rem; text-decoration: none; }

.sd-locator { padding: 0.5rem; }
.sd-locator p { padding: 0.25rem 0.5rem 0; font-size: 0.85rem; }
.sd-locator-map { display: block; width: 100%; height: auto; border-radius: var(--sd-radius-small); }
.sd-locator-link { display: block; border-radius: var(--sd-radius-small); }
.sd-locator-link:hover .sd-locator-map { opacity: 0.85; }
.sd-locator-water { fill: var(--sd-map-water); }
.sd-locator-neighbours { fill: var(--sd-map-land); stroke: var(--sd-map-border); stroke-width: 0.6; fill-rule: evenodd; }
.sd-locator-province { fill: var(--sd-map-province); stroke: var(--sd-map-border); stroke-width: 0.8; fill-rule: evenodd; }
.sd-locator-halo { fill: var(--sd-accent); opacity: 0.2; }
.sd-locator-pin { fill: var(--sd-accent); stroke: #ffffff; stroke-width: 2; }
/* MapLibre's popups are always white, so what's in them keeps the standard light colours, whatever the theme. */
.sd-map-popup, .sd-map-card { --sd-text: #1d2430; --sd-muted: #5d6675; --sd-bg: #ffffff; --sd-surface: #f5f6f8; --sd-border: #dfe2e7; --sd-accent: #1f5fae; --sd-accent-text: #ffffff; --sd-button: #1f5fae; --sd-button-text: #ffffff; --sd-link: #1f5fae; color: var(--sd-text); }
.sd-map-popup { text-decoration: none; font-family: var(--sd-font); }

/* Map view: the map fills the window under the header, with a column of filters and cards on the left. data-sd-side is
   auto (open on a wide screen, closed on a phone), open or closed. On a phone the open column covers the map. */

.sd-main:has(.sd-mapview) { padding: 0; }
.sd-main:has(.sd-mapview) > .sd-wrap { width: 100%; }
.sd-mapview { --sd-side: 420px; position: relative; display: grid; height: calc(100dvh - 4rem - 1px); }
.sd-mapview-side { display: flex; flex-direction: column; gap: var(--sd-gap); min-height: 0; overflow-y: auto; padding: var(--sd-pad); background: var(--sd-bg); }
.sd-mapview-head { display: flex; align-items: center; gap: 1rem; }
.sd-mapview-head h1 { flex: 1; font-size: 1.25rem; }
.sd-mapview-close { padding: 0.25rem 0.5rem; border: 0; background: none; color: var(--sd-muted); font: inherit; font-size: 1.1rem; cursor: pointer; }
.sd-mapview .sd-search-form { margin: 0; }
.sd-mapview-status { font-size: 0.9rem; color: var(--sd-muted); }
.sd-mapview-cards { display: grid; gap: var(--sd-gap); }
.sd-mapview-more { align-self: center; }
.sd-mapview-main { position: relative; min-width: 0; min-height: 0; }
.sd-mapview .sd-map { height: 100%; border-radius: 0; }
.sd-mapview-notice {
    position: absolute; z-index: 1; top: 0.75rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 10rem);
    padding: 0.5rem 0.9rem; border-radius: var(--sd-radius); background: var(--sd-bg); box-shadow: 0 2px 10px rgb(0 0 0 / 0.2); font-size: 0.9rem;
}
.sd-mapview[data-sd-side="closed"] .sd-mapview-side { display: none; }
.sd-mapview-handle { display: none; }

/* A wide screen: the column beside the map, with a handle on its edge (‹ to hide it, › to bring it back). */
@media (min-width: 900px) {
    .sd-mapview { grid-template-columns: var(--sd-side) minmax(0, 1fr); }
    .sd-mapview[data-sd-side="closed"] { grid-template-columns: minmax(0, 1fr); }
    .sd-mapview-side { border-right: 1px solid var(--sd-border); }
    .sd-mapview .sd-mapview-show, .sd-mapview-close { display: none; }
    .sd-mapview-handle {
        display: grid; place-items: center; position: absolute; z-index: 1; top: 50%; left: 0; transform: translateY(-50%);
        width: 1.6rem; height: 4rem; padding: 0; border: 1px solid var(--sd-border); border-left: 0; border-radius: 0 8px 8px 0;
        background: var(--sd-bg); color: var(--sd-text); box-shadow: 2px 0 8px rgb(0 0 0 / 0.15); font: inherit; font-size: 1.4rem; cursor: pointer;
    }
    .sd-mapview-handle:hover { background: var(--sd-surface); }
    .sd-mapview-handle::before { content: "‹"; }
    .sd-mapview[data-sd-side="closed"] .sd-mapview-handle::before { content: "›"; }
}

/* A phone: the map first, with "List (N)" to open the column over it and the column's ✕ to close it. */
@media (max-width: 899px) {
    .sd-mapview-side { position: absolute; z-index: 2; inset: 0; }
    .sd-mapview[data-sd-side="auto"] .sd-mapview-side, .sd-mapview[data-sd-side="open"] .sd-mapview-show { display: none; }
    .sd-mapview-show {
        position: absolute; z-index: 1; bottom: 1.5rem; left: 50%; transform: translateX(-50%); box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
    }
    .sd-mapview-notice { top: auto; bottom: 5rem; max-width: calc(100% - 1.5rem); }
}

/* The column's cards lie on their side, photo on the left, so more of them fit; a clicked pin's card is outlined. */
.sd-mapview-cards .sd-card-link { flex-direction: row; }
.sd-mapview-cards .sd-card-photo { flex: 0 0 42%; aspect-ratio: auto; min-height: 8.5rem; }
.sd-mapview-cards .sd-card-body { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.sd-mapview-cards .sd-card-price { font-size: 1.1rem; }
.sd-mapview-cards .sd-card-address { font-size: 0.95rem; }
.sd-mapview-cards .sd-card-place, .sd-mapview-cards .sd-card-facts { font-size: 0.8rem; }
.sd-card-active { outline: 3px solid var(--sd-accent); outline-offset: -1px; }

/* The mark on the listing whose card the visitor is pointing at: a bigger dot in the highlight colour that keeps
   bouncing, with a shadow on the ground under it. MapLibre positions the outer element, so only the dot moves. */
.sd-map-mark { width: 24px; height: 24px; pointer-events: none; }
.sd-map-mark::after {
    content: ""; position: absolute; left: 4px; right: 4px; bottom: -3px; height: 6px; border-radius: 50%;
    background: rgb(0 0 0 / 0.3); animation: sd-mark-shadow 0.7s ease-in-out infinite alternate;
}
.sd-map-mark span {
    position: absolute; inset: 0; border: 3px solid #ffffff; border-radius: 50%; background: var(--sd-highlight);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.35); animation: sd-mark-bounce 0.7s ease-in-out infinite alternate;
}
@keyframes sd-mark-bounce { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes sd-mark-shadow { from { transform: scale(1); opacity: 1; } to { transform: scale(0.6); opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
    .sd-map-mark span, .sd-map-mark::after { animation: none; }
}

/* A clicked pin's card, in its popup. */
.sd-map-card { width: 250px; font-family: var(--sd-font); }
.sd-map-card .sd-card, .sd-map-card .sd-card:hover { box-shadow: none; transform: none; outline: 0; }
.sd-map-card .sd-card-body { padding: 0.5rem 0.6rem; }
.sd-map-card .sd-card-price { font-size: 1.05rem; }
.sd-map-card .sd-card-address { font-size: 0.9rem; }
.sd-map-card .sd-card-place, .sd-map-card .sd-card-facts, .sd-map-card .sd-card-days { font-size: 0.8rem; }

/* Contact form */

.sd-contact textarea { resize: vertical; }
.sd-contact-note { font-size: 0.8rem; }
.sd-contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sd-narrow { max-width: 640px; }
.sd-area .sd-narrow { margin-inline: auto; }
.sd-contact-page { margin-inline: auto; }
.sd-contact-intro { margin-bottom: var(--sd-gap); }

/* Sign-in and the agent area */

.sd-account { max-width: 440px; margin-inline: auto; }
.sd-account-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.9rem; }
.sd-link-button { padding: 0; border: 0; background: none; color: var(--sd-text); font: inherit; cursor: pointer; }
.sd-link-button:hover { color: var(--sd-link); }
.sd-steps { display: grid; gap: 0.75rem; padding-left: 1.2rem; }
.sd-qr svg { display: block; width: 200px; height: auto; }
.sd-secret { font-family: ui-monospace, monospace; letter-spacing: 0.05em; overflow-wrap: anywhere; }
.sd-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.4rem 1rem; padding: 0; list-style: none; font-family: ui-monospace, monospace; }
/* The agent area's menu: down the left from 900px, above the page under one Menu heading on a phone. Each group opens
   from its heading, with a chevron pointing down when open and right when closed. */
/* The layout's wrappers around a page outside the agent area: no box of their own. */
.sd-plain { display: contents; }
.sd-manage { display: grid; gap: var(--sd-gap); }
.sd-manage-body { min-width: 0; }
.sd-manage-nav { font-size: 0.95rem; }
.sd-manage-nav a { display: block; padding: 0.3rem 0.6rem; border-radius: var(--sd-radius-small); color: var(--sd-text); text-decoration: none; }
.sd-manage-nav a:hover { color: var(--sd-link); }
.sd-manage-nav a[aria-current] { background: var(--sd-surface); font-weight: 600; }
.sd-manage-nav-group a { padding-left: 1rem; }
.sd-manage-nav-version { margin: 1rem 0 0; padding: 0 0.6rem; color: var(--sd-muted); font-size: 0.75rem; }
.sd-manage-nav-group > summary, .sd-manage-nav-menu { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.6rem 0.3rem; color: var(--sd-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; list-style: none; }
.sd-manage-nav-group > summary::-webkit-details-marker { display: none; }
.sd-manage-nav-group > summary::after, .sd-manage-nav-menu::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.sd-manage-nav-group[open] > summary::after, .sd-manage-nav-toggle:checked + .sd-manage-nav-menu::after { transform: rotate(45deg); }
.sd-manage-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.sd-manage-nav-toggle:focus-visible + .sd-manage-nav-menu { outline: 2px solid var(--sd-link); }
@media (max-width: 899px) {
    .sd-manage-nav { padding: 0.25rem 0.5rem 0.5rem; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small); }
    .sd-manage-nav-menu { padding-top: 0.5rem; font-size: 0.85rem; }
    .sd-manage-nav-toggle:not(:checked) ~ .sd-manage-nav-items { display: none; }
}
@media (min-width: 900px) {
    .sd-manage { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; }
    .sd-manage-nav { position: sticky; top: 1rem; padding-right: 0.75rem; border-right: 1px solid var(--sd-border); }
    .sd-manage-nav-menu { display: none; }
}
.sd-legend { padding-inline: 0.25rem; font-weight: 600; }
/* Choices that belong together inside a panel, such as a tick box and the fields it turns off. */
.sd-field-group { display: grid; gap: 0.75rem; padding: var(--sd-pad); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small); }
.sd-field-group-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
.sd-field:has(.sd-input:disabled), .sd-field-inline:has(input:disabled) { opacity: 0.5; }
.sd-manage-grid { display: grid; gap: var(--sd-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sd-button-quiet { border: 1px solid var(--sd-border); background: var(--sd-bg); color: var(--sd-text); font-weight: 400; }
.sd-icon-button { gap: 0.45rem; }
.sd-icon { flex: none; }
/* The agent area's Activity screen. */
.sd-activity-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin-bottom: var(--sd-gap); }
.sd-activity-filters .sd-field { flex: 1 1 9rem; }
.sd-activity-buttons { display: flex; align-items: center; gap: 0.75rem; }
.sd-activity-when { white-space: nowrap; }
.sd-activity-details summary { cursor: pointer; }
.sd-activity-changes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0.5rem 0 0; font-size: 0.9rem; }
.sd-activity-changes dt { color: var(--sd-muted); }
.sd-activity-changes dd { margin: 0; overflow-wrap: anywhere; }
.sd-activity-before { text-decoration: line-through; color: var(--sd-muted); }
.sd-lead-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--sd-gap); }
.sd-lead-filter a { padding: 0.25rem 0.8rem; border: 1px solid var(--sd-border); border-radius: 999px; text-decoration: none; color: var(--sd-text); font-size: 0.9rem; }
.sd-lead-filter a[aria-current] { border-color: var(--sd-accent); background: var(--sd-accent); color: var(--sd-accent-text); }
.sd-lead-email { max-width: 760px; margin-bottom: var(--sd-gap); overflow-wrap: anywhere; }
.sd-leads { display: grid; gap: var(--sd-gap); }
.sd-lead { max-width: 760px; }
.sd-lead-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.sd-panel .sd-lead-head h2 { margin-bottom: 0; }
.sd-lead-contact { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; overflow-wrap: anywhere; }
.sd-lead-message { white-space: pre-line; padding-left: 0.75rem; border-left: 3px solid var(--sd-border); }
.sd-lead-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sd-badge-gone { margin-left: 0.4rem; border: 1px solid var(--sd-border); background: var(--sd-surface); color: var(--sd-muted); }
.sd-media-usage, .sd-media-upload { max-width: 760px; margin-bottom: var(--sd-gap); }
.sd-media-meter { width: 100%; height: 0.75rem; accent-color: var(--sd-accent); }
.sd-media-list { display: grid; gap: var(--sd-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); padding: 0; list-style: none; }
.sd-media-item { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--sd-border); border-radius: var(--sd-radius); overflow: hidden; }
.sd-media-preview { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--sd-surface); text-decoration: none; }
.sd-media-preview img { width: 100%; height: 100%; object-fit: contain; }
.sd-media-pdf { font-size: 1.5rem; font-weight: 600; color: var(--sd-muted); }
.sd-media-details { display: grid; gap: 0.6rem; align-content: start; padding: var(--sd-pad); }
.sd-media-name { font-weight: 600; overflow-wrap: anywhere; }
.sd-media-address { display: flex; gap: 0.5rem; }
.sd-media-address .sd-input { flex: 1; min-width: 0; }
.sd-media-alt { display: grid; gap: 0.5rem; justify-items: start; }
.sd-media-alt .sd-field { width: 100%; }
.sd-media-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: var(--sd-gap); }
.sd-media-tools .sd-client-search { margin-bottom: 0; }
.sd-media-sizes { display: flex; gap: 0.75rem; }
.sd-media-sizes a[aria-current] { font-weight: 600; text-decoration: none; color: var(--sd-text); }
.sd-media-more-body { display: grid; gap: 0.6rem; }
.sd-media-more > summary { cursor: pointer; color: var(--sd-link); }
.sd-media-list:not(.sd-media-small) .sd-media-more > summary { display: none; }
.sd-media-more[open] > summary { margin-bottom: 0.5rem; }
.sd-media-small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); align-items: start; }
.sd-media-small .sd-media-details { gap: 0.25rem; padding: 0.5rem; font-size: 0.85rem; }
.sd-media-small .sd-media-address { flex-wrap: wrap; }
.sd-media-delete summary { cursor: pointer; color: var(--sd-problem); }
.sd-media-delete form { display: grid; gap: 0.5rem; justify-items: start; margin-top: 0.5rem; }

/* Home page */

.sd-hero { padding: calc(2 * var(--sd-pad)); border-radius: var(--sd-radius); background: var(--sd-surface); margin-bottom: var(--sd-space); }
.sd-hero h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.2; }
.sd-hero > p { margin: 0.4rem 0 1.25rem; }
/* The theme's main picture, darkened so the white heading and labels read on any photo. */
.sd-hero-pictured { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(5 * var(--sd-pad)); background: #000; color: #fff; --sd-muted: rgb(255 255 255 / 0.9); }
.sd-hero-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.sd-quick-search { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }

/* The banner search: a picture behind centred text and one wide box. Not overflow: hidden, which would cut off the
   suggestions; the picture takes the corners instead. Full width runs to the window's edges, under the header. */
.sd-banner {
    position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(18rem, 45vh, 30rem);
    padding: calc(3 * var(--sd-pad)) var(--sd-gutter); margin-bottom: var(--sd-space);
    background: #000; color: var(--sd-banner-text, #fff); text-align: center;
}
.sd-banner-plain { background: var(--sd-accent); }
.sd-banner-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); border-radius: inherit; }
.sd-banner-bordered { border: 1px solid var(--sd-border); border-radius: var(--sd-radius); }
.sd-banner-full { margin-inline: calc(50% - 50vw); margin-top: calc(-1 * var(--sd-gap)); }
.sd-main:has(.sd-banner-full) { overflow-x: clip; }
.sd-banner-inner { --sd-banner-gap: 0.6rem; display: grid; justify-items: center; gap: var(--sd-banner-gap); width: 100%; }
.sd-banner-heading, .sd-banner-intro { color: inherit; text-shadow: 0 1px 4px rgb(0 0 0 / 0.45); max-width: 50rem; }
.sd-banner-heading { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.15; }
.sd-banner-intro { font-family: var(--sd-font); font-size: clamp(1rem, 2.2vw, 1.3rem); font-weight: 400; line-height: 1.4; }
/* One white bar holding the box, Near me and the button: at least 60% of the banner (the whole of it on a phone), never
   wider than 46rem. Its own dark text, whatever the theme, since the bar is always white. */
.sd-banner-form { display: grid; gap: 0.4rem; width: min(46rem, max(60%, min(100%, 30rem))); margin-top: 0.75rem; }
.sd-banner-bar {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.4rem; padding: 0.4rem;
    background: #fff; color: #1d2430; border-radius: var(--sd-radius); box-shadow: 0 6px 24px rgb(0 0 0 / 0.2);
}
.sd-banner-bar .sd-suggest { flex: 1 1 14rem; display: flex; }
.sd-banner-input { flex: 1; width: 100%; min-height: 2.9rem; padding-inline: 0.75rem; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.05rem; }
.sd-banner-input:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 0; border-radius: var(--sd-radius-small); }
.sd-banner-near {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.9rem; padding-inline: 0.9rem;
    font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--sd-radius-small);
    background: var(--sd-banner-near, #fff); color: var(--sd-banner-near-text, #1f2937); border: 1px solid rgb(0 0 0 / 0.18);
}
.sd-banner-near[hidden] { display: none; }
.sd-banner-near[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.sd-banner-near-icon { flex: none; }
.sd-banner-button { min-height: 2.9rem; padding-inline: 1.4rem; background: var(--sd-banner-button, var(--sd-button)); color: var(--sd-banner-button-text, var(--sd-button-text)); }
.sd-banner-near-status { margin: 0; font-size: 0.9rem; text-shadow: 0 1px 3px rgb(0 0 0 / 0.5); }
.sd-banner-near-status:empty { display: none; }

/* Under the bar: the popular cities, a row of pill buttons and the trust line, each wrapping onto more lines as needed. */
.sd-banner-popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.25rem 0.4rem; font-size: 0.9rem; text-shadow: 0 1px 3px rgb(0 0 0 / 0.5); }
.sd-banner-popular ul, .sd-banner-links, .sd-banner-trust { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.sd-banner-popular li + li::before { content: "·"; margin-inline: 0.35rem; }
.sd-banner-popular a, .sd-banner-trust a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
/* Each row's space above (from what's over it) and below, the agent's in pixels or these: the banner's gap above the
   popular cities, twice it above the buttons and trust line, none below. The margins take the gap back off, so the
   agent's number is the whole space, 0 included. */
.sd-banner-popular { margin-block: calc(var(--sd-banner-popular-above, var(--sd-banner-gap)) - var(--sd-banner-gap)) var(--sd-banner-popular-below, 0px); }
.sd-banner-links { gap: 0.6rem; margin-block: calc(var(--sd-banner-links-above, calc(2 * var(--sd-banner-gap))) - var(--sd-banner-gap)) var(--sd-banner-links-below, 0px); }
.sd-banner-trust { margin-block: calc(var(--sd-banner-trust-above, calc(2 * var(--sd-banner-gap))) - var(--sd-banner-gap)) var(--sd-banner-trust-below, 0px); }
.sd-banner-link {
    display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.4rem 1.1rem; border-radius: 999px;
    font-weight: 600; text-decoration: none; background: var(--sd-banner-link, transparent);
    color: var(--sd-banner-link-text, var(--sd-banner-text, #fff)); border: 1px solid var(--sd-banner-link-border, var(--sd-banner-text, #fff));
}
.sd-banner-link:hover { text-decoration: underline; }
.sd-banner-trust { gap: 0.3rem 1.75rem; font-size: 0.9rem; text-shadow: 0 1px 3px rgb(0 0 0 / 0.5); }
/* On a phone: the box takes its own line, with Near me and Search side by side under it. */
@media (max-width: 600px) {
    .sd-banner-bar .sd-suggest { flex-basis: 100%; }
    .sd-banner-near, .sd-banner-button { flex: 1; }
    .sd-banner-phone-hide { display: none; }
}

/* Suggestions under a search box, as the visitor types (sd-site.js). */
.sd-suggest { position: relative; flex: 1; min-width: 0; }
.sd-suggestions {
    position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20; max-height: 22rem; overflow-y: auto;
    margin: 0; padding: 0.25rem; list-style: none; text-align: left; color: var(--sd-text); background: var(--sd-bg);
    border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small); box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.sd-suggestions[hidden] { display: none; }
.sd-suggest-group { padding: 0.4rem 0.6rem 0.15rem; font-size: 0.8rem; font-weight: 600; color: var(--sd-muted); }
.sd-suggestions a { display: grid; padding: 0.45rem 0.6rem; border-radius: var(--sd-radius-small); color: inherit; text-decoration: none; }
.sd-suggestions small { color: var(--sd-muted); }
.sd-suggestions a:hover, .sd-suggestions [aria-selected="true"] a { background: var(--sd-surface); }

.sd-agent { display: flex; flex-direction: column; align-items: center; gap: var(--sd-gap); text-align: center; }
.sd-agent-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.sd-agent-text > * + * { margin-top: 0.25rem; }
.sd-agent-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; }
.sd-agent-bio { max-width: 75ch; line-height: 1.6; }
.sd-agent-bio > * + * { margin-top: 0.75em; }

.sd-home-flow { display: flex; flex-direction: column; gap: var(--sd-space); }
.sd-home-section h2, .sd-similar h2 { font-size: 1.4rem; }
.sd-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: var(--sd-gap); }

.sd-similar { margin-top: calc(2 * var(--sd-space)); padding-top: var(--sd-space); border-top: 1px solid var(--sd-border); }

/* Two across on a phone, the last alone across the row when the number is odd; the home page sets the widths on a wider screen. */
.sd-city-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 1rem 0 0; list-style: none; }
.sd-city-tiles > li { grid-column: span 6; }
.sd-city-tiles > li:last-child:nth-child(odd) { grid-column: span 12; }
.sd-city-tile { display: grid; gap: 0.15rem; color: inherit; text-decoration: none; }
.sd-city-tile img, .sd-city-tile .sd-post-banner { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 0.3rem; border-radius: var(--sd-radius-small); object-fit: cover; }
.sd-city-tile:hover strong { text-decoration: underline; }
@media (min-width: 40rem) {
    .sd-city-tiles > .sd-city-tile-1, .sd-city-tiles > .sd-city-tile-1:last-child:nth-child(odd) { grid-column: span 12; }
    .sd-city-tiles > .sd-city-tile-2, .sd-city-tiles > .sd-city-tile-2:last-child:nth-child(odd) { grid-column: span 6; }
    .sd-city-tiles > .sd-city-tile-3, .sd-city-tiles > .sd-city-tile-3:last-child:nth-child(odd) { grid-column: span 4; }
    .sd-city-tiles > .sd-city-tile-4, .sd-city-tiles > .sd-city-tile-4:last-child:nth-child(odd) { grid-column: span 3; }
}
.sd-city-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem 2rem; padding: 0; margin-top: 1rem; list-style: none; }
.sd-city-links li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.4rem; border-bottom: 1px solid var(--sd-border); }

/* The city directory (/real-estate) */
.sd-directory + .sd-directory { margin-top: calc(2 * var(--sd-space)); }
.sd-directory h2 { font-size: 1.4rem; }
.sd-directory-letters { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-block: 0.75rem; font-weight: 600; }
.sd-directory-letter { margin-top: var(--sd-space); font-size: 1.1rem; }

/* A city's listings index (/real-estate/{province}/{city}/listings) */
.sd-listing-index { padding: 0; list-style: none; }
.sd-listing-index li { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; padding-block: 0.45rem; border-bottom: 1px solid var(--sd-border); }
.sd-listing-index li a { flex: 1 1 18rem; font-weight: 600; }
.sd-nearby { margin-bottom: 0.75rem; font-weight: 600; }
.sd-place-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: var(--sd-space); }

.sd-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.sd-results-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

.sd-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: var(--sd-space); }
.sd-pager a, .sd-pager span { min-width: 2.25rem; padding: 0.35rem 0.6rem; border-radius: var(--sd-radius-small); text-align: center; }
.sd-pager a { border: 1px solid var(--sd-border); text-decoration: none; }
.sd-pager-current { background: var(--sd-accent); color: var(--sd-accent-text); font-weight: 600; }

@media (max-width: 600px) {
    .sd-field-wide { grid-column: 1 / -1; }
    .sd-listing-price { text-align: left; }
    .sd-listing-price .sd-reactions { justify-content: flex-start; }
    .sd-facts { grid-template-columns: 1fr; }
    .sd-facts div { grid-template-columns: 8rem 1fr; }
}

/* Videos (VideoRow, VideoPlayer): rows of YouTube videos that scroll sideways, and the pop-up player */
.sd-video-intro { max-width: 60rem; margin-bottom: var(--sd-space); }
.sd-video-section + .sd-video-section { margin-top: var(--sd-space); }
.sd-video-section h2 { font-size: 1.4rem; }
.sd-video-section .sd-strip-head p { flex-basis: 100%; }
.sd-scroll-row { position: relative; }
.sd-scroll-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 23%, 300px); gap: var(--sd-gap);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin;
    margin: 0; padding: 0 0 0.75rem; list-style: none;
}
/* The agent chooses the size of each page's cards on the home page: about four, three or two across. */
.sd-post-track-small { grid-auto-columns: clamp(220px, calc((100% - 3 * var(--sd-gap)) / 4), 400px); }
.sd-post-track-medium { grid-auto-columns: clamp(280px, calc((100% - 2 * var(--sd-gap)) / 3), 560px); }
.sd-post-track-large { grid-auto-columns: clamp(300px, calc((100% - var(--sd-gap)) / 2), 840px); }
.sd-video-card, .sd-scroll-track .sd-post-card { min-width: 0; scroll-snap-align: start; }
.sd-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--sd-radius); overflow: hidden; background: #000; }
.sd-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-video-play {
    position: absolute; inset: 0; margin: auto; width: 56px; height: 40px; border-radius: 10px;
    background: rgb(0 0 0 / 0.7); transition: background-color 0.2s;
}
.sd-video-play::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
    border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
.sd-video-thumb:hover .sd-video-play { background: var(--sd-accent); }
.sd-video-badge {
    position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.2rem 0.4rem; border-radius: 4px;
    background: rgb(0 0 0 / 0.75); color: #fff; font-size: 0.75rem; line-height: 1;
}
.sd-video-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    margin-top: 0.6rem; font-size: 1rem; line-height: 1.3;
}
.sd-video-title a { color: inherit; text-decoration: none; }
.sd-video-title a:hover { text-decoration: underline; }
.sd-video-date { font-size: 0.85rem; }
.sd-video-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 0.9rem; line-height: 1.4; }
.sd-scroll-arrow {
    top: 40%;
    position: absolute; z-index: 1; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px;
    padding: 0 0 3px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--sd-bg); color: var(--sd-text); box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); font-size: 1.6rem; line-height: 1;
}
.sd-scroll-arrow[hidden] { display: none; }
.sd-gallery-arrow { top: 50%; }
.sd-scroll-prev { left: 0.25rem; }
.sd-scroll-next { right: 0.25rem; }
.sd-video-dialog { width: min(960px, 100vw - 2rem); max-width: none; padding: 0; border: 0; border-radius: var(--sd-radius); background: #111; color: #fff; }
.sd-video-dialog.sd-video-short { width: min(420px, 100vw - 2rem); }
.sd-video-dialog::backdrop { background: rgb(0 0 0 / 0.8); }
.sd-video-dialog-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem 0.6rem 1rem; }
.sd-video-dialog-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.sd-video-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; background: rgb(255 255 255 / 0.15); color: #fff; font-size: 1.5rem; line-height: 1; }
.sd-video-frame { aspect-ratio: 16 / 9; background: #000; }
.sd-video-short .sd-video-frame { aspect-ratio: 9 / 16; max-height: 75vh; margin-inline: auto; }
.sd-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.sd-video-dialog-foot { padding: 0.6rem 1rem 0.75rem; text-align: right; font-size: 0.9rem; }
.sd-video-dialog-foot a { color: #fff; }

/* The agent area's Videos page: a playlist a row */
.sd-video-choice { display: grid; gap: 0.5rem; padding-block: 0.75rem; border-top: 1px solid var(--sd-border); }
.sd-video-choice-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.9rem; }
.sd-drag-handle { justify-self: start; padding: 0.1rem 0.5rem; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small); color: var(--sd-muted); font-size: 0.85rem; cursor: grab; user-select: none; }
.sd-drag-handle[hidden] { display: none; }
.sd-dragging { opacity: 0.5; }
.sd-home-parts { display: grid; }
.sd-home-part { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding-block: 0.6rem; border-top: 1px solid var(--sd-border); }
.sd-home-part:last-child { border-bottom: 1px solid var(--sd-border); }
.sd-home-city-field { flex: 1; min-width: 10rem; }
.sd-home-city-thumb { width: 4.5rem; aspect-ratio: 16 / 9; border-radius: var(--sd-radius-small); object-fit: cover; }
.sd-home-part-name { flex: 1; min-width: 10rem; font-weight: 600; }
.sd-home-part .sd-link-button:disabled { visibility: hidden; }
.sd-home-part:has(input[name*="Form.Show"]:not(:checked)) .sd-home-part-name { color: var(--sd-muted); font-weight: 400; }

@media (max-width: 767px) {
    .sd-scroll-track { grid-auto-columns: 75%; }
    .sd-scroll-arrow { display: none; }
    .sd-gallery-arrow { display: grid; }
}

/* The agent's own pages (ContentView): an Articles page's cards, an entry, a Reports page's archive. */

.sd-content-intro { max-width: 70ch; margin-bottom: var(--sd-space); }
.sd-post-list { display: grid; gap: var(--sd-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); padding: 0; list-style: none; }
.sd-post-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--sd-border); border-radius: var(--sd-radius); overflow: hidden; background: var(--sd-bg); }
.sd-post-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sd-post-banner { display: grid; place-content: center; justify-items: center; gap: 0.4rem; aspect-ratio: 16 / 9; padding: var(--sd-pad); background: var(--sd-accent); color: var(--sd-accent-text); font-family: var(--sd-heading-font); font-size: 1.25rem; font-weight: 600; text-align: center; text-decoration: none; }
.sd-post-banner svg { width: 3rem; height: 3rem; fill: currentColor; }
.sd-post-text { display: grid; gap: 0.4rem; align-content: start; padding: var(--sd-pad); }
.sd-post-text :is(h2, h3) { font-size: 1.15rem; line-height: 1.3; }
.sd-post-text :is(h2, h3) a { text-decoration: none; color: var(--sd-text); }
.sd-entry { margin-bottom: var(--sd-space); }
.sd-entry-read { max-width: calc(75ch + 2 * var(--sd-space)); margin-inline: auto; padding-inline: clamp(var(--sd-pad), 4vw, var(--sd-space)); border-inline: 1px solid var(--sd-border); }
.sd-entry-head { margin-bottom: var(--sd-gap); }
.sd-entry-head h2 { font-size: 1.4rem; }
.sd-archive { max-width: 70ch; }
.sd-archive h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.sd-archive h3 { font-size: 1rem; margin: 0.75rem 0 0.25rem; }
.sd-archive ul { display: grid; gap: 0.25rem; padding: 0; list-style: none; }
.sd-archive a[aria-current] { font-weight: 600; text-decoration: none; color: var(--sd-text); }

/* A Document entry's sandboxed frame; sd-site.js sets its height to what it shows. White, since the agent's report
   expects a page's usual background, whatever the theme. */
.sd-doc-frame { display: block; width: 100%; height: 80vh; border: 0; background: #fff; }

/* An Article entry's HTML, cleaned of the agent's own classes and styles, so these rules style it. They reach only
   inside sd-content, never the agent's HTML elsewhere on the page. */
.sd-content { max-width: 75ch; line-height: 1.65; overflow-wrap: break-word; }
.sd-content > * + * { margin-top: 1em; }
.sd-content h2, .sd-content h3, .sd-content h4 { margin-top: 1.6em; line-height: 1.25; }
.sd-content h2 { font-size: 1.5rem; }
.sd-content h3 { font-size: 1.2rem; }
.sd-content ul, .sd-content ol { padding-left: 1.5em; }
.sd-content li + li { margin-top: 0.3em; }
.sd-content img, .sd-content video { max-width: 100%; height: auto; border-radius: var(--sd-radius); }
.sd-content figure { margin-inline: 0; }
.sd-content figcaption { margin-top: 0.4em; font-size: 0.9rem; color: var(--sd-muted); }
.sd-content blockquote { margin-inline: 0; padding-left: 1em; border-left: 3px solid var(--sd-border); color: var(--sd-muted); }
.sd-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.sd-content th, .sd-content td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--sd-border); text-align: left; vertical-align: top; }
.sd-content th { font-weight: 600; }
.sd-content iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--sd-radius); }
.sd-content hr { border: 0; border-top: 1px solid var(--sd-border); }

/* What the agent wrote about a city, at the foot of its search page and list of listings: the text with a small picture beside it, then the
   other pictures. On a wide screen the picture sits to the right of the text, the two together in the middle of the page
   (the text at a readable width, which fills its column, so no gap beside it) and the picture in the middle of the text's height; on a
   phone it comes first, above it, in the middle. */
.sd-city-about { display: grid; grid-template-columns: minmax(0, 42rem); justify-content: center; gap: var(--sd-gap); margin-block: var(--sd-space); }
@media (min-width: 48rem) {
    .sd-city-about:has(> .sd-city-figure + .sd-content) {
        grid-template-columns: minmax(0, 42rem) minmax(0, 20rem); column-gap: calc(2 * var(--sd-gap)); align-items: center;
    }
    .sd-city-about > .sd-city-figure + .sd-content { grid-column: 1; grid-row: 1; }
}
.sd-city-figure { margin: 0; }
.sd-city-about > .sd-city-figure { justify-self: center; width: min(100%, 28rem); text-align: center; }
.sd-city-about > .sd-content { max-width: none; }
.sd-city-figure img { display: block; width: 100%; height: auto; border-radius: var(--sd-radius); }
.sd-city-figure figcaption { margin-top: 0.4em; font-size: 0.85rem; color: var(--sd-muted); }
.sd-city-figure figcaption a { color: inherit; }
.sd-city-more { margin-top: calc(2 * var(--sd-space)); }
/* The heading lines up with the centred text and picture below it. */
.sd-city-more > h2 { width: min(100%, 42rem); margin-inline: auto; }
@media (min-width: 48rem) {
    .sd-city-more:has(.sd-city-figure + .sd-content) > h2 { width: min(100%, 62rem + 2 * var(--sd-gap)); }
}
.sd-city-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sd-gap); width: min(100%, 62rem + 2 * var(--sd-gap)); margin: var(--sd-space) auto 0; }
.sd-city-image-row { display: grid; gap: 0.5rem; padding-block: 0.75rem; border-top: 1px solid var(--sd-border); }

/* The agent area's Pages screens and the shared HTML editor (HtmlEditor). CodeMirror's own stylesheet, loaded only on
   editor pages, styles the code box itself. */

.sd-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* An agent's title in ALL CAPS (the Theme screen's Titles), for the eye only. */
.sd-caps { text-transform: uppercase; }
.sd-content-pages { display: grid; gap: var(--sd-gap); max-width: 900px; }
.sd-entry-form { display: grid; gap: var(--sd-gap); }
.sd-entry-fields { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.sd-entry-fields .sd-field-wide { grid-column: 1 / -1; }
.sd-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.sd-status-draft { color: var(--sd-muted); }
.sd-editor-panes { display: grid; gap: var(--sd-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.sd-editor-source, .sd-editor-preview { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.sd-editor-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sd-editor-insert { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sd-editor-insert .sd-input { max-width: 16rem; }
.sd-editor-tools label.sd-button { cursor: pointer; }
.sd-editor-tools [hidden] { display: none; }
.sd-editor-text { width: 100%; font-family: ui-monospace, monospace; font-size: 0.85rem; resize: vertical; }
.sd-editor .CodeMirror { height: 70vh; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small); font-size: 0.85rem; }
.sd-editor-frame { width: 100%; height: 70vh; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small); background: #fff; }
.sd-editor-tabs { display: none; gap: 0.5rem; margin-bottom: 0.5rem; }
.sd-editor-tabs button { padding: 0.3rem 0.9rem; border: 1px solid var(--sd-border); border-radius: 999px; background: var(--sd-bg); color: var(--sd-text); font: inherit; cursor: pointer; }
.sd-editor-tabs button[aria-selected="true"] { border-color: var(--sd-accent); background: var(--sd-accent); color: var(--sd-accent-text); }

/* On a phone the two sides take turns, as tabs. */
@media (max-width: 900px) {
    .sd-editor-tabs:not([hidden]) { display: flex; }
    .sd-editor[data-sd-editor-showing="source"] [data-sd-editor-pane="preview"],
    .sd-editor[data-sd-editor-showing="preview"] [data-sd-editor-pane="source"] { display: none; }
}
.sd-input-short { width: 5rem; }
.sd-entry-steps { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: var(--sd-space); }
.sd-entry-step-next { margin-left: auto; }

/* The agent area's Theme screen: a card per ready-made theme, and a sample of the choices, in its own --sd- values. */
.sd-theme-screen { display: grid; gap: var(--sd-gap); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.sd-theme-presets { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.sd-theme-preset { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.5rem; padding: 0.6rem; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small); cursor: pointer; }
.sd-theme-preset:has(input:checked) { border-color: var(--sd-accent); outline: 1px solid var(--sd-accent); }
.sd-theme-hint { grid-column: 1 / -1; }
.sd-theme-swatches { display: flex; grid-column: 1 / -1; height: 1.25rem; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-small); overflow: hidden; }
.sd-theme-swatches span { flex: 1; }
.sd-theme-colours { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.sd-theme-colours input { width: 4rem; height: 2.5rem; padding: 0.15rem; }
.sd-theme-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sd-theme-sample { display: grid; gap: var(--sd-gap); padding-bottom: var(--sd-pad); border: 1px solid var(--sd-border); border-radius: var(--sd-radius); overflow: hidden; background: var(--sd-bg); color: var(--sd-text); font-family: var(--sd-font); }
.sd-theme-sample .sd-header .sd-wrap { min-height: 3.5rem; }
.sd-theme-sample > :not(.sd-header) { margin-inline: var(--sd-pad); }
.sd-theme-sample .sd-hero { margin-bottom: 0; }

/* The box a delete asks in first (sd-site.js). */
.sd-confirm { max-width: min(28rem, calc(100vw - 2rem)); padding: var(--sd-pad); border: 1px solid var(--sd-border); border-radius: var(--sd-radius); background: var(--sd-bg); color: var(--sd-text); }
.sd-confirm::backdrop { background: rgb(0 0 0 / 0.4); }
.sd-confirm-text { margin-bottom: var(--sd-gap); }
.sd-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.sd-button-danger { background: var(--sd-problem); border-color: var(--sd-problem); color: #fff; }

/* The cookie notice, at the foot of the screen until the visitor chooses. */

.sd-consent {
    position: fixed; inset: auto 1rem 1rem; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
    max-width: 44rem; margin-inline: auto; padding: 1rem; border: 1px solid var(--sd-border); border-radius: var(--sd-radius);
    background: var(--sd-bg); color: var(--sd-text); box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
}
.sd-consent[hidden] { display: none; }
.sd-consent p { flex: 1 1 18rem; margin: 0; font-size: 0.9rem; }
.sd-consent-actions { display: flex; gap: 0.5rem; }

.sd-privacy h2 { margin-top: 1.5rem; font-size: 1.15rem; }