/* Minification failed. Returning unminified contents.
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,28): run-time error CSS1039: Token not allowed after unary operator: '-page-bg'
(76,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(84,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(84,52): run-time error CSS1039: Token not allowed after unary operator: '-brand-tint-strong'
(90,29): run-time error CSS1039: Token not allowed after unary operator: '-brand-ink'
(97,21): run-time error CSS1039: Token not allowed after unary operator: '-shell'
(110,28): run-time error CSS1039: Token not allowed after unary operator: '-header-bg'
(111,17): run-time error CSS1039: Token not allowed after unary operator: '-on-header'
(112,35): run-time error CSS1039: Token not allowed after unary operator: '-brand'
(125,18): run-time error CSS1039: Token not allowed after unary operator: '-logo-height'
(174,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(175,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(176,25): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(177,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(188,22): run-time error CSS1039: Token not allowed after unary operator: '-header-bg'
(189,17): run-time error CSS1039: Token not allowed after unary operator: '-on-header'
(203,22): run-time error CSS1039: Token not allowed after unary operator: '-brand'
(204,17): run-time error CSS1039: Token not allowed after unary operator: '-on-brand'
(235,22): run-time error CSS1039: Token not allowed after unary operator: '-brand-tint'
(236,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(237,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(256,17): run-time error CSS1039: Token not allowed after unary operator: '-ink-muted'
(279,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(280,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(281,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(290,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-ink'
(311,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-ink'
(339,22): run-time error CSS1039: Token not allowed after unary operator: '-brand'
(357,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(358,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(382,32): run-time error CSS1039: Token not allowed after unary operator: '-line'
(390,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-2'
(391,28): run-time error CSS1039: Token not allowed after unary operator: '-brand-tint-strong'
(411,17): run-time error CSS1039: Token not allowed after unary operator: '-ink-muted'
(416,36): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(417,32): run-time error CSS1039: Token not allowed after unary operator: '-brand'
(425,17): run-time error CSS1039: Token not allowed after unary operator: '-ink-muted'
(429,34): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(438,28): run-time error CSS1039: Token not allowed after unary operator: '-line'
(439,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(440,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(441,17): run-time error CSS1039: Token not allowed after unary operator: '-ink'
(460,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
 */
/* ==========================================================================
   SMS Client Brief - portal styles

   An agency only needs to supply THREE colours in
   /includes/agency/<KEY>/client-portal.css:

       --header-bg   top bar + card header background
       --brand       accent colour (labels, icons, key figures)
       --ink         body text colour

   Everything else - page background, surfaces, borders, muted text and the
   text colour that sits on top of the header/brand - is derived from those
   three. Legacy agency variables (--navbar-bg / --main / --dark-colour) are
   still honoured as fallbacks so existing agencies keep working untouched.
   ========================================================================== */

:root {
    /* ---- the three agency colours (legacy names as fallbacks) ---------- */
    --header-bg: var(--navbar-bg, #1D2430);
    --brand: var(--main, #3F7FBF);
    --ink: var(--dark-colour, #1A1D23);

    /* ---- derived: readable text on the header / brand ------------------ */
    --on-header: #fff;
    --on-brand: #fff;
    --brand-ink: var(--brand); /* brand, darkened enough to read on white */

    /* ---- derived: neutrals (static fallbacks, refined below) ----------- */
    --page-bg: #F1F2F5;
    --surface: #fff;
    --surface-2: #F7F8FA;
    --line: rgba(0,0,0,.11);
    --ink-muted: rgba(0,0,0,.58);
    --brand-tint: rgba(0,0,0,.05);
    --brand-tint-strong: rgba(0,0,0,.10);

    /* ---- shape & motion ------------------------------------------------ */
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(16,20,28,.06), 0 10px 28px -14px rgba(16,20,28,.35);
    --shell: 1120px;
    --logo-height: 60px;
}

/* Mix the neutrals with the agency colours so the page feels of a piece. */
@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --page-bg: color-mix(in srgb, var(--header-bg) 5%, #F2F3F6);
        --surface-2: color-mix(in srgb, var(--brand) 6%, #F8F9FB);
        --line: color-mix(in srgb, var(--ink) 13%, transparent);
        --ink-muted: color-mix(in srgb, var(--ink) 68%, transparent);
        --brand-tint: color-mix(in srgb, var(--brand) 12%, transparent);
        --brand-tint-strong: color-mix(in srgb, var(--brand) 24%, transparent);
    }
}

/* Pick black or white text for the header/brand based on their lightness,
   so a pale brand colour never ends up as white-on-white. */
@supports (color: oklch(from white l c h)) {
    :root {
        --on-header: oklch(from var(--header-bg) clamp(0, (0.68 - l) * 100, 1) 0 0);
        --on-brand: oklch(from var(--brand) clamp(0, (0.68 - l) * 100, 1) 0 0);
        --brand-ink: oklch(from var(--brand) min(l, 0.52) c h);
    }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

body {
    margin: 0;
    background-color: var(--page-bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--ink); text-decoration-color: var(--brand-tint-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

img { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--brand-ink);
    outline-offset: 2px;
    border-radius: 4px;
}

.brief-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.brief-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--header-bg);
    color: var(--on-header);
    border-bottom: 3px solid var(--brand);
}

.brief-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 76px;
    padding-block: .6rem;
}

.brief-logo {
    height: var(--logo-height);
    max-height: 15vw;
    width: auto;
    object-fit: contain;
}

.brief-topbar-tag {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .75;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Page layout
   -------------------------------------------------------------------------- */

.brief-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-block: clamp(1.25rem, 3vw, 2.25rem) 3rem;
    align-items: start;
}

@media (min-width: 992px) {
    .brief-main {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 2rem;
    }

    .brief-aside {
        position: sticky;
        top: 100px;
    }
}

.brief-stack {
    display: grid;
    gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.brief-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.brief-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .9rem clamp(1rem, 3vw, 1.5rem);
    background: var(--header-bg);
    color: var(--on-header);
}

.brief-card-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.brief-ref {
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brief-card-body {
    padding: clamp(1rem, 3vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   Headline requirements (bed / bath / car)
   -------------------------------------------------------------------------- */

.brief-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.brief-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .9rem .5rem;
    background: var(--brand-tint);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-align: center;
}

.brief-stat-value {
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.brief-stat-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.brief-stat-label i { font-size: .9rem; }

/* --------------------------------------------------------------------------
   Fact list (locations, property types, ...)
   -------------------------------------------------------------------------- */

.brief-facts {
    display: grid;
    gap: .75rem;
    margin: 0;
}

@media (min-width: 600px) {
    .brief-facts { grid-template-columns: 1.4fr 1fr; }
    .brief-facts > .brief-fact--wide { grid-column: 1 / -1; }
}

.brief-fact {
    margin: 0;
    padding: .85rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.brief-fact dt {
    margin: 0 0 .15rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-ink);
}

.brief-fact dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Sub-sections inside the brief
   -------------------------------------------------------------------------- */

.brief-section { margin-top: 1.5rem; }

.brief-section-title {
    margin: 0 0 .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-ink);
}

/* Notes - rendered from free text as a bulleted list */
#comments { font-size: 1rem; }

#comments ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}

#comments li {
    position: relative;
    margin: 0;
    padding-left: 1.4rem;
}

#comments li::before {
    content: "";
    position: absolute;
    left: .25rem;
    top: .62em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--brand);
}

/* Properties they like */
.brief-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brief-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Agency / agents
   -------------------------------------------------------------------------- */

.brief-agents {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brief-agent {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.brief-agent + .brief-agent {
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.brief-agent-photo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    border: 2px solid var(--brand-tint-strong);
}

.brief-agent-name {
    margin: 0 0 .3rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.brief-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
}

.brief-contact {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .95rem;
    color: var(--ink-muted);
    text-decoration: none;
    word-break: break-word;
}

.brief-contact:hover { color: var(--ink); text-decoration: underline; }
.brief-contact i { color: var(--brand); width: 1rem; text-align: center; }

/* --------------------------------------------------------------------------
   Opt-out panel
   -------------------------------------------------------------------------- */

.brief-note {
    margin: 0 0 1.25rem;
    color: var(--ink-muted);
    font-size: .95rem;
}

.brief-note strong { color: var(--ink); }

.brief-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .7rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.brief-btn--danger { border-color: #D8B4B4; color: #A32222; }
.brief-btn--danger:hover { background: #A32222; border-color: #A32222; color: #fff; }
.brief-btn:disabled { opacity: .55; cursor: default; }

/* Success state swapped in by index.js after opting out */
.brief-result {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: 1rem;
    background: #EAF7EF;
    border: 1px solid #BFE3CD;
    border-radius: var(--radius-sm);
    color: #14532D;
}

.brief-result i { margin-top: .2rem; font-size: 1.1rem; }
.brief-result h2 { margin: 0 0 .15rem; font-size: 1rem; font-weight: 700; }
.brief-result p { margin: 0; font-size: .95rem; }

/* --------------------------------------------------------------------------
   Motion & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
    body { background: #fff; }
    .brief-topbar { position: static; }
    .brief-aside, .brief-optout { display: none; }
    .brief-main { display: block; padding: 0; }
    .brief-card { box-shadow: none; break-inside: avoid; }
}