/* 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-text: #1d2430;
    --sd-muted: #5d6675;
    --sd-bg: #ffffff;
    --sd-surface: #f5f6f8;
    --sd-border: #dfe2e7;
    --sd-accent: #1f5fae;
    --sd-accent-text: #ffffff;
    --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;

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

.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); }
.sd-header .sd-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.sd-brand { font-weight: 700; font-size: 1.2rem; color: var(--sd-text); text-decoration: none; }
.sd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.sd-nav a { color: var(--sd-text); text-decoration: none; }
.sd-nav a:hover { color: var(--sd-accent); }

.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 p + p { margin-top: 0.75rem; }

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

.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); }
.sd-card-photo img { 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-accent); }
/* 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: rgb(255 255 255 / 0.92); 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: 6px; overflow: hidden; background: var(--sd-surface); }
.sd-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.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-back { margin-bottom: 0.75rem; font-size: 0.9rem; }
.sd-back a::before { content: "‹ "; }

/* Forms */

.sd-field { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--sd-muted); }
.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: 6px;
    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: 6px; background: var(--sd-problem-bg); color: var(--sd-problem); }
.sd-done { padding: 0.6rem 0.8rem; border-radius: 6px; 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: 6px; cursor: pointer; text-decoration: none;
    background: var(--sd-accent); color: var(--sd-accent-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; }
.sd-search-more { margin-top: 0.75rem; font-size: 0.9rem; }
.sd-search-more summary { cursor: pointer; color: var(--sd-accent); }
.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; }

.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: 6px; }
.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; }
.sd-map-popup { color: var(--sd-text); 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-photo img { position: absolute; inset: 0; }
.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-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-accent); }
.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; }
.sd-manage-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: var(--sd-gap); padding-bottom: 0.75rem; border-bottom: 1px solid var(--sd-border); }
.sd-manage-nav a[aria-current] { font-weight: 600; text-decoration: none; color: var(--sd-text); }
.sd-legend { padding-inline: 0.25rem; font-weight: 600; }
.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; }
.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-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-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; }
.sd-quick-search { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }

.sd-agent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sd-gap); margin-bottom: var(--sd-space); }
.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; gap: 0.25rem 1rem; }
.sd-agent-bio { flex-basis: 100%; max-width: 75ch; line-height: 1.6; }
.sd-agent-bio > * + * { margin-top: 0.75em; }

.sd-home-section + .sd-home-section { margin-top: 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); }

.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; }
.sd-directory .sd-city-links li > span { display: flex; gap: 0.75rem; }

/* 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: 6px; 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-video-row { position: relative; }
.sd-video-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;
}
.sd-video-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-video-arrow {
    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-video-arrow[hidden] { display: none; }
.sd-video-prev { left: 0.25rem; }
.sd-video-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: 6px; color: var(--sd-muted); font-size: 0.85rem; cursor: grab; user-select: none; }
.sd-drag-handle[hidden] { display: none; }
.sd-dragging { opacity: 0.5; }

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

/* 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-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-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. */
.sd-doc-frame { display: block; width: 100%; height: 80vh; border: 0; }

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

/* 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; }
.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: 6px; font-size: 0.85rem; }
.sd-editor-frame { width: 100%; height: 70vh; border: 1px solid var(--sd-border); border-radius: 6px; 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 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; }