/* Davey Real Estate — vendor campaign dashboards */
:root {
  color-scheme: light;
  --bg: #f5f4f1;
  --surface: #fdfdfc;
  --surface-2: #f0efeb;
  --ink: #16142e;
  --ink-2: #53525f;
  --muted: #8b8a94;
  --grid: #e5e4de;
  --baseline: #c9c8c2;
  --border: rgba(22, 20, 46, 0.10);
  --navy: #171137;
  --navy-ink: #f5f4fa;
  --navy-sub: #c0bcd6;
  --red: #ED2D37;
  --series: #4a3aa7;
  --series-soft: rgba(74, 58, 167, 0.14);
  --cat1: #2a78d6;
  --cat2: #eb6834;
  --cat3: #1baf7a;
  --good: #0ca30c;
  --good-text: #006300;
  --serious: #ec835a;
  --serious-text: #a34718;
  --shadow: 0 1px 2px rgba(22,20,46,.05), 0 8px 24px rgba(22,20,46,.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e0d16; --surface: #191724; --surface-2: #211f30;
    --ink: #f3f2f8; --ink-2: #b9b7c6; --muted: #8b8a94;
    --grid: #2b2938; --baseline: #3a3849;
    --border: rgba(243, 242, 248, 0.10);
    --series: #9085e9; --series-soft: rgba(144, 133, 233, 0.16);
    --cat1: #3987e5; --cat2: #d95926; --cat3: #199e70;
    --good-text: #4ec24e; --serious-text: #f09b7c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0d16; --surface: #191724; --surface-2: #211f30;
  --ink: #f3f2f8; --ink-2: #b9b7c6; --muted: #8b8a94;
  --grid: #2b2938; --baseline: #3a3849;
  --border: rgba(243, 242, 248, 0.10);
  --series: #9085e9; --series-soft: rgba(144, 133, 233, 0.16);
  --cat1: #3987e5; --cat2: #d95926; --cat3: #199e70;
  --good-text: #4ec24e; --serious-text: #f09b7c;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  /* Nothing should ever scroll sideways: a single wide element used to let
     the whole page drift left and right under a thumb. */
  overflow-x: hidden;
}
html {
  /* Stop iOS resizing text by itself when the phone is turned, and stop the
     rubber-band bounce that makes a home-screen app feel unanchored. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { max-width: 1060px; margin: 0 auto; padding-inline: 20px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- hero ---------- */
.hero {
  position: relative; color: var(--navy-ink);
  background-color: var(--navy);
  background-size: cover; background-position: center center;
  padding: 28px 0 118px;
  /* Tall enough that a landscape listing photo reads as a photo rather than a
     cropped strip; the header content spreads top-and-bottom over it. */
  min-height: clamp(320px, 36vw, 500px);
  display: flex;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,17,55,.80) 0%, rgba(23,17,55,.34) 26%, rgba(23,17,55,.26) 52%, rgba(23,17,55,.72) 100%);
}
.hero.no-img { min-height: 0; display: block; }
.hero.no-img::before {
  background: radial-gradient(120% 90% at 85% -10%, rgba(74,58,167,.5), transparent 60%),
              linear-gradient(180deg, rgba(23,17,55,0), rgba(23,17,55,.4));
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.hero .wrap {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
  /* A flex item will not shrink past its content unless told to. Without this
     the hero pushed 39px wider than the phone and the whole report scrolled
     sideways. */
  min-width: 0;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* margin-left:auto keeps these hard right even when the header wraps on a phone.
   The row carries the report tag as well as the buttons, so it has to be free
   to wrap: on a narrow screen it could not fit on one line and overflowed. */
.hero-actions {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  flex-wrap: wrap; justify-content: flex-end;
}
.logo svg { display: block; height: 41px; width: auto; filter: drop-shadow(0 1px 6px rgba(10,8,30,.5)); }
.report-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-ink); border: 1px solid rgba(245,244,250,.32);
  background: rgba(23,17,55,.42); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
/* ---------- theme switch ---------- */
.theme-toggle {
  position: relative; flex: none; width: 60px; height: 32px; padding: 0;
  border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(245,244,250,.34);
  background: rgba(23,17,55,.5); backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: rgba(245,244,250,.55); }
.theme-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tt-hint {
  position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
  color: var(--navy-ink); opacity: .6;
  transition: opacity .2s ease;
  display: flex; align-items: center; justify-content: center;
}
.tt-hint svg { width: 100%; height: 100%; }
.tt-sun { left: 7px; }
.tt-moon { right: 7px; }
/* Only the mode you'd switch TO is hinted; the thumb carries the current one. */
.theme-toggle[aria-checked="true"] .tt-moon,
.theme-toggle[aria-checked="false"] .tt-sun { opacity: 0; }
.tt-thumb {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--navy-ink); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px rgba(8,6,24,.45);
  transition: transform .26s cubic-bezier(.3,.8,.3,1);
}
.tt-thumb svg { width: 14px; height: 14px; }
.theme-toggle[aria-checked="true"] .tt-thumb { transform: translateX(28px); }

.hero h1 {
  margin: 0; font-size: clamp(26px, 4.5vw, 42px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance;
  text-shadow: 0 2px 18px rgba(10,8,30,.55);
}
.hero .suburb { color: var(--navy-sub); font-weight: 600; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px;
  font-size: 13px; color: var(--navy-sub); text-shadow: 0 1px 8px rgba(10,8,30,.6);
}
.hero-meta strong { color: var(--navy-ink); font-weight: 600; }

/* ---------- report body ---------- */
main.wrap { padding-block: 22px 56px; display: flex; flex-direction: column; gap: 18px; }
.report-main { margin-top: -64px; position: relative; z-index: 2; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; }
.card h2 { margin: 0 0 2px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.card .sub { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.takeaway { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--grid); font-size: 13px; color: var(--ink-2); }
.takeaway b { color: var(--ink); }

.offer { box-shadow: var(--shadow); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.offer-amount .eyebrow { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 2.4s ease infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(237,45,55,.4); } 50% { box-shadow: 0 0 0 6px rgba(237,45,55,0); } }
.offer-amount .value { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.offer-body { flex: 1 1 320px; font-size: 13.5px; color: var(--ink-2); margin: 0; }
.offer-body b { color: var(--ink); }
.offer-chips { display: flex; flex-direction: column; gap: 6px; }
.chip { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }

.delta { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--good-text); }
.delta.flat { color: var(--muted); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* ---------- scroll-in animation ---------- */
.av { opacity: 0; transform: translateY(16px); }
.av.inview { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1); }

/* ---------- bars ---------- */
.hbars { display: flex; flex-direction: column; gap: 14px; }
.hbar { display: grid; grid-template-columns: 128px 1fr 64px; align-items: center; gap: 12px; }
.hbar .name { font-size: 13px; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.hbar .name small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.hbar .track { position: relative; height: 18px; border-radius: 0 4px 4px 0; }
.hbar .fill {
  position: absolute; inset: 0 auto 0 0; background: var(--series);
  border-radius: 0 4px 4px 0; min-width: 3px; width: 0;
  transition: width .8s cubic-bezier(.25,.7,.3,1), opacity .15s ease;
}
.av.inview .fill { width: var(--w); }
.hbar:hover .fill, .hbar:focus-visible .fill { opacity: .82; }
.hbar:focus-visible { outline: 2px solid var(--series); outline-offset: 3px; border-radius: 4px; }
.hbar .val { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.axis-note { margin-top: 12px; font-size: 11.5px; color: var(--muted); }

/* ---------- columns ---------- */
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 12px; height: 190px; border-bottom: 1px solid var(--baseline); padding-inline: 4px; }
.col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.col .n { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.col .bar { width: min(44px, 78%); background: var(--series); border-radius: 4px 4px 0 0; height: 0; transition: height .7s cubic-bezier(.25,.7,.3,1), opacity .15s ease; }
.av.inview .col .bar { height: var(--h); }
.col:hover .bar, .col:focus-visible .bar { opacity: .82; }
.col:focus-visible { outline: 2px solid var(--series); outline-offset: 3px; border-radius: 4px; }
.col .bar.zero, .av.inview .col .bar.zero { height: 2px; background: var(--baseline); border-radius: 1px; }
.col.upcoming .bar { background: var(--series-soft); border: 1.5px dashed var(--series); }
.col.upcoming .n { color: var(--series); font-size: 11px; letter-spacing: .04em; }
.col-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; padding: 8px 4px 0; }
.col-labels div { text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.col-labels div b { display: block; color: var(--ink-2); font-weight: 600; font-size: 12px; }

/* ---------- donut ---------- */
.donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.donut-box { position: relative; width: 172px; height: 172px; flex: none; margin-inline: auto; }
.donut-box svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.donut-seg { fill: none; stroke-linecap: butt; transition: stroke-dasharray .9s cubic-bezier(.25,.7,.3,1), opacity .15s ease; }
.donut-seg:hover, .donut-seg:focus-visible { opacity: .8; outline: none; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.donut-center .big { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.donut-center .cap { font-size: 10.5px; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; max-width: 90px; }
/* min-width forces the legend onto its own full-width row rather than
   squeezing long portal names like "realestate.com.au" into a narrow column */
.legend { flex: 1 1 240px; display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.leg-row { display: grid; grid-template-columns: 11px minmax(0,1fr) auto 38px; gap: 8px; align-items: center; font-size: 12.5px; }
.leg-dot { width: 11px; height: 11px; border-radius: 3.5px; }
.leg-name { color: var(--ink-2); font-weight: 600; overflow-wrap: break-word; }
.leg-name small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.leg-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.leg-pct { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: 12px; }

/* ---------- journey ---------- */
.journey { display: grid; grid-template-columns: repeat(5, 1fr); }
.step { padding: 4px 14px 4px 0; }
.step + .step { padding-left: 18px; border-left: 1px solid var(--grid); }
.step .stage { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.step .num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.step .conv { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.step:last-child .num { color: var(--series); }
@media (max-width: 760px) {
  .journey { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  /* Two columns, so every odd child starts a row and must not carry a divider. */
  .step:nth-child(odd) { border-left: none; padding-left: 0; }
}

/* ---------- feedback ---------- */
.fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fb-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.fb-ico { flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; }
.fb-ico svg { width: 10px; height: 10px; }
.pos .fb-ico { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good-text); }
.obj .fb-ico { background: color-mix(in srgb, var(--serious) 18%, transparent); color: var(--serious-text); }
.fb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.fb-head .tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.fb-head.good .tag { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); }
.fb-head.warn .tag { background: color-mix(in srgb, var(--serious) 16%, transparent); color: var(--serious-text); }

.insight { border-left: 3px solid var(--series); background: var(--surface); border-radius: 0 14px 14px 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 22px; font-size: 14px; color: var(--ink-2); }
.insight-head { display: flex; align-items: center; gap: 13px; margin-bottom: 11px; }
.insight-thumb {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--border); background: var(--surface-2);
}
.insight-thumb.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--series); letter-spacing: .02em;
}
.insight .who {
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
/* When these words were last written, so the vendor can judge how current
   the read is without asking. */
.insight .who-when {
  font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted);
}
.insight b { color: var(--ink); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.steps li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; padding-block: 12px; }
.steps li + li { border-top: 1px solid var(--grid); }
.dot-col { display: flex; justify-content: center; padding-top: 5px; }
.t-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--series); }
.t-dot.hollow { background: transparent; border: 2px solid var(--baseline); width: 8px; height: 8px; }
.steps .when { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--series); }
.steps .what { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.steps .what b { color: var(--ink); }

/* ---------- trend ---------- */
.trend-svg { width: 100%; height: auto; display: block; }
.trend-hint { font-size: 13px; color: var(--muted); padding: 18px 0 6px; }
.trend-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.av.inview .trend-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease .1s; }
.trend-svg .tdot, .trend-svg .vlab { opacity: 0; transition: opacity .4s ease .9s; }
.av.inview .trend-svg .tdot, .av.inview .trend-svg .vlab { opacity: 1; }

/* ---------- table ---------- */
details.tblbox { border: none; }
details.tblbox summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
details.tblbox summary::-webkit-details-marker { display: none; }
details.tblbox summary .chev { transition: transform .2s ease; color: var(--muted); flex: none; }
details.tblbox[open] summary .chev { transform: rotate(180deg); }
details.tblbox summary:focus-visible { outline: 2px solid var(--series); outline-offset: 3px; border-radius: 6px; }
.tbl-scroll { overflow-x: auto; margin-inline: -24px; padding-inline: 24px; margin-top: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; }
th { text-align: right; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--baseline); }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; color: var(--ink-2); }
td.pname { font-weight: 600; color: var(--ink); }
tr:last-child td { border-bottom: none; }
td .dash { color: var(--muted); }

footer.wrap { padding-block: 0 48px; }
.fineprint { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 70ch; }

/* ---------- tooltip ---------- */
#tip {
  position: fixed; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .12s ease;
  background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; max-width: 240px; box-shadow: var(--shadow);
}
#tip.show { opacity: 1; }
#tip small { display: block; font-weight: 500; opacity: .75; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(8px);
  z-index: 70; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; opacity: 0; transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--shadow); max-width: min(90vw, 480px); text-align: center; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.bad { background: var(--red); color: #fff; }

/* ---------- admin ---------- */
.admin-band { background: var(--navy); color: var(--navy-ink); padding: 26px 0 96px; }
.admin-band .wrap { display: flex; flex-direction: column; gap: 22px; }
.admin-band h1 { margin: 0; font-size: clamp(22px, 3.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.admin-band .lede { font-size: 13.5px; color: var(--navy-sub); margin: 6px 0 0; }
.admin-main { position: relative; z-index: 2; margin-top: -64px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 14px; }
.prop-row { display: grid; grid-template-columns: 118px 1fr; gap: 18px; align-items: start; }
.prop-thumb { width: 118px; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.prop-thumb.ph { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.prop-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.prop-title span { color: var(--muted); font-weight: 600; }
.prop-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.prop-meta b { color: var(--ink); }
.prop-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.abtn {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink);
  /* <a class="abtn"> should read as a button, not a link */
  text-decoration: none;
}
.abtn:hover { border-color: var(--series); color: var(--series); }
.abtn.solid { background: var(--navy); color: var(--navy-ink); border-color: transparent; }
:root[data-theme="dark"] .abtn.solid { background: var(--series); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .abtn.solid { background: var(--series); } }
.abtn.solid:hover { color: var(--navy-ink); filter: brightness(1.15); }
.abtn.danger { color: var(--red); }
.abtn.danger:hover { border-color: var(--red); color: var(--red); }
.abtn:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }
.abtn[disabled] { opacity: .55; cursor: default; }
.linkline { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.linkline input {
  flex: 1; font: inherit; font-size: 12px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; min-width: 180px;
}
.admin-add { border: 1.5px dashed var(--baseline); background: transparent; border-radius: 14px; padding: 22px; text-align: center; }
.admin-add p { margin: 0 0 12px; color: var(--ink-2); font-size: 13.5px; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.team-row + .team-row { border-top: 1px solid var(--grid); }
.team-name { font-weight: 600; font-size: 14px; }
.team-mail { font-size: 12.5px; color: var(--muted); }
.badge { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }
.badge.pending { color: var(--serious-text); border-color: color-mix(in srgb, var(--serious) 40%, transparent); }
.badge.owner { color: var(--series); border-color: color-mix(in srgb, var(--series) 40%, transparent); }

/* ---------- auth screens ---------- */
.auth-page { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: var(--navy); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: 16px; padding: 30px 30px 26px; box-shadow: 0 20px 60px rgba(8,6,24,.45); }
.auth-card .logo { display: block; margin-bottom: 26px; }
.auth-card .logo svg path[fill="#FEFEFE"] { fill: var(--ink); }
/* The global drop shadow is there to lift the logo off the hero photo;
   on a flat card it just reads as a smudge. */
.auth-card .logo svg { filter: none; }
.auth-card h1 { margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.auth-card .lede { margin: 0 0 22px; font-size: 13.5px; color: var(--ink-2); }
.auth-card form { display: flex; flex-direction: column; gap: 4px; }
.errbox {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  color: var(--red); font-size: 13px; font-weight: 600;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
}
.okbox {
  background: color-mix(in srgb, var(--good) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
  color: var(--good-text); font-size: 13px; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
}
.bigbtn {
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; width: 100%;
  background: var(--navy); color: var(--navy-ink); border: none; border-radius: 10px; padding: 13px; margin-top: 12px;
}
.bigbtn:hover { filter: brightness(1.15); }
.bigbtn[disabled] { opacity: .6; cursor: default; }
.bigbtn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- forms ---------- */
.fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.fld label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.fld input, .fld textarea {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; width: 100%;
}
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--series); outline-offset: 0; border-color: transparent; }
.fld textarea { min-height: 74px; resize: vertical; }
.fld .hint { font-size: 11.5px; color: var(--muted); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.frow.three { grid-template-columns: 1fr 1fr 1fr; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10,8,30,.45); z-index: 60; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(480px, 100%); background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
}
/* Form-heavy drawers (the editor, weekly stats, paste & fill) get real room on
   a desktop. The list drawers stay narrow, where width would only add
   travel between the row and its buttons. */
.drawer.wide { width: min(1020px, 100%); }
.drawer.wide .drawer-head,
.drawer.wide .drawer-foot { padding-inline: 30px; }
.drawer.wide .drawer-body { padding-inline: 30px; }
.drawer.wide .fld textarea { min-height: 104px; }

/* Portal figures: one flowing grid, so they repack instead of leaving a
   single stranded field on the last row of a rigid three. */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px 12px; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--grid); }
.drawer-head h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.drawer-body { flex: 1; overflow-y: auto; padding: 6px 22px 22px; }
.drawer-foot { display: flex; gap: 10px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--grid); background: var(--surface); }
.fgroup { margin-top: 20px; }
.fgroup > .glabel { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rowline { display: grid; grid-template-columns: 1fr 76px 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.rowline.stepline { grid-template-columns: 130px 1fr 34px; }
.rowline input { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; width: 100%; }
.icon-btn { font: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); border-radius: 8px; height: 33px; }
.icon-btn:hover { color: var(--red); }
.mini-btn { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px dashed var(--baseline); background: transparent; color: var(--ink-2); border-radius: 8px; padding: 7px 12px; }
.mini-btn:hover { border-color: var(--series); color: var(--series); }
.upmark { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.savebtn { flex: 1; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; background: var(--navy); color: var(--navy-ink); border: none; border-radius: 10px; padding: 12px; }
:root[data-theme="dark"] .savebtn { background: var(--series); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .savebtn { background: var(--series); } }
.savebtn[disabled] { opacity: .6; cursor: default; }
.cancelbtn { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--ink-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; }
.hero-preview { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); display: block; }
.filefld input[type=file] { padding: 7px; }

.notice-card { text-align: center; padding: 60px 24px; }
.notice-card h2 { font-size: 20px; }
.notice-card p { color: var(--ink-2); max-width: 52ch; margin-inline: auto; }
.loading { text-align: center; padding: 80px 20px; color: var(--muted); font-size: 14px; }

@media (max-width: 560px) {
  .hbar { grid-template-columns: 96px 1fr 56px; }
  .offer-amount .value { font-size: 32px; }
  .prop-row { grid-template-columns: 1fr; }
  .prop-thumb { width: 100%; }
  .frow, .frow.three { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .av { opacity: 1; transform: none; }
  .hbar .fill { width: var(--w); }
  .col .bar { height: var(--h); }
  .col .bar.zero { height: 2px; }
  .trend-line { stroke-dashoffset: 0; }
  .trend-svg .tdot, .trend-svg .vlab { opacity: 1; }
}

/* ---------- admin filter bar ---------- */
.filterbar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 16px;
}
.fl-group { display: flex; align-items: center; gap: 8px; }
.fl-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.filterbar select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer;
  padding: 7px 34px 7px 16px;
  max-width: 210px; text-overflow: ellipsis;
}
.filterbar select:hover { border-color: var(--series); }
.filterbar select:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }
.fl-count {
  margin-left: auto; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 560px) {
  .fl-group { flex: 1 1 100%; }
  .filterbar select { flex: 1; max-width: none; }
  .fl-count { margin-left: 0; }
}

/* ---------- audio updates ---------- */
.audio-card { border-left: 3px solid var(--red); }
.audio-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.audio-ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.audio-ico svg { width: 17px; height: 17px; }
.audio-head h2 { margin: 0 0 1px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

.ap { display: flex; align-items: center; gap: 14px; }
.ap + .ap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--grid); }
.ap-play {
  flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: none; background: var(--series); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, filter .15s ease;
}
.ap-play svg { width: 19px; height: 19px; margin-left: 1px; }
.ap-play:hover { filter: brightness(1.12); transform: scale(1.04); }
.ap-play:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ap-body { flex: 1; min-width: 0; }
.ap-title {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ap-new {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--red); color: #fff;
}
.ap-new.played { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good-text); }
.ap-scrub { padding-block: 9px; cursor: pointer; }
.ap-scrub:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; border-radius: 6px; }
.ap-bar { display: block; height: 5px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.ap-fill { display: block; height: 100%; width: 0; background: var(--series); border-radius: 999px; }
.ap-meta {
  display: flex; justify-content: space-between; font-size: 11.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.ap-featured .ap-play { width: 52px; height: 52px; }
.ap-featured .ap-play svg { width: 21px; height: 21px; }
.ap-featured .ap-title { font-size: 14.5px; }

.audio-archive { margin-top: 6px; }
.arch-row { display: flex; align-items: center; gap: 14px; padding-block: 14px; }
.arch-row + .arch-row { border-top: 1px solid var(--grid); }
.arch-row .ap { flex: 1; min-width: 0; }
.arch-row .ap-play { width: 38px; height: 38px; }
.arch-row .ap-play svg { width: 15px; height: 15px; }
.arch-date { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------- admin: voice update panel ---------- */
.rec-box { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.rec-btn {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
}
.rec-btn:hover { border-color: var(--red); }
.rec-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); flex: none; }
.rec-btn.recording { border-color: var(--red); color: var(--red); }
.rec-btn.recording .rec-dot { animation: recpulse 1.3s ease infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.rec-time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.au-preview { margin-top: 14px; padding: 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.au-preview audio { width: 100%; }
.au-preview-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.au-size { font-size: 11.5px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }

.au-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 11px; }
.au-row + .au-row { border-top: 1px solid var(--grid); }
.au-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.au-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.au-empty { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.au-ready {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--good-text); margin-bottom: 9px;
}

/* ---------- agent sign-off footer ---------- */
.site-footer {
  background: var(--navy); color: var(--navy-ink);
  margin-top: 40px; padding-block: 34px calc(28px + env(safe-area-inset-bottom, 0px));
}
.foot-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; padding-bottom: 24px;
  border-bottom: 1px solid rgba(245,244,250,.16);
}
.agent-card { display: flex; align-items: center; gap: 18px; min-width: 0; }
.agent-photo {
  width: 84px; height: 84px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 2px solid rgba(245,244,250,.28);
  background: rgba(245,244,250,.1);
}
.agent-photo.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: var(--navy-sub); letter-spacing: .02em;
}
.agent-info { min-width: 0; }
.agent-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--navy-sub); margin-bottom: 3px;
}
.agent-name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.agent-role { font-size: 13px; color: var(--navy-sub); margin-top: 1px; }
.agent-contacts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.agent-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--navy-ink);
  text-decoration: none; border-bottom: 1px solid transparent;
  overflow-wrap: anywhere;
}
.agent-link svg { width: 15px; height: 15px; flex: none; color: var(--navy-sub); }
.agent-link:hover { border-bottom-color: rgba(245,244,250,.5); }
.agent-link:hover svg { color: var(--navy-ink); }
.agent-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.foot-brand .logo svg { height: 36px; filter: none; }
.foot-office { font-size: 13px; color: var(--navy-sub); }
.foot-office svg { color: var(--navy-sub); }
.site-footer .fineprint { color: var(--navy-sub); margin: 22px 0 0; }

@media (max-width: 620px) {
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .foot-brand { align-items: flex-start; }
  .agent-photo { width: 68px; height: 68px; }
  .agent-name { font-size: 18px; }
}

/* ---------- paste & fill ---------- */
.add-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.admin-add .add-hint { margin: 20px 0 0; font-size: 12px; color: var(--muted); }
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.shot { position: relative; }
.shot img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); display: block;
}
.shot-x {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: none; cursor: pointer; font: inherit; font-size: 14px; line-height: 1;
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow);
}
.shot-x:hover { background: var(--red); color: #fff; }
.fillnote {
  background: color-mix(in srgb, var(--series) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--series) 35%, transparent);
  color: var(--ink-2); border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; line-height: 1.5; margin-top: 12px;
}
.fillnote b { color: var(--ink); }
.fillnote-detail {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--series) 25%, transparent);
}

/* ---------- per-rep AI access toggle ---------- */
.ai-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
}
.ai-toggle:hover { border-color: var(--series); }
.ai-toggle:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }
.ai-toggle[disabled] { opacity: .5; cursor: default; }
.ai-knob {
  position: relative; width: 30px; height: 17px; flex: none;
  border-radius: 999px; background: var(--baseline);
  transition: background .2s ease;
}
.ai-knob::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: var(--surface);
  transition: transform .22s cubic-bezier(.3,.8,.3,1);
  box-shadow: 0 1px 2px rgba(8,6,24,.35);
}
.ai-toggle[aria-checked="true"] { color: var(--series); border-color: color-mix(in srgb, var(--series) 45%, transparent); }
.ai-toggle[aria-checked="true"] .ai-knob { background: var(--series); }
.ai-toggle[aria-checked="true"] .ai-knob::after { transform: translateX(13px); }
.ai-badge {
  font-size: 11px; font-weight: 600; color: var(--series);
  border: 1px solid color-mix(in srgb, var(--series) 35%, transparent);
  background: color-mix(in srgb, var(--series) 10%, transparent);
  border-radius: 999px; padding: 6px 13px; white-space: nowrap;
}

/* Inline icon inside a button label (robot on the AI fill buttons) */
.btn-ico { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.savebtn .btn-ico { width: 17px; height: 17px; vertical-align: -4px; }

/* ---------- vendor: documents & files ---------- */
.doc-list { display: flex; flex-direction: column; }
.doc-row {
  display: flex; align-items: center; gap: 14px;
  padding-block: 13px; text-decoration: none; color: inherit;
}
.doc-row + .doc-row { border-top: 1px solid var(--grid); }
.doc-row:hover .doc-name { color: var(--series); }
.doc-row:hover .doc-go { transform: translateX(3px); color: var(--series); }
.doc-row:focus-visible { outline: 2px solid var(--series); outline-offset: 3px; border-radius: 8px; }
.doc-ico {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
}
.doc-ico svg { width: 19px; height: 19px; }
.doc-ico.pdf { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 28%, transparent); }
.doc-body { flex: 1; min-width: 0; }
.doc-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; transition: color .15s ease; }
.doc-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.doc-go { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease, color .15s ease; }

/* ---------- file dropzone ---------- */
.dropzone {
  border: 1.5px dashed var(--baseline); border-radius: 12px;
  background: var(--surface-2); padding: 26px 18px; text-align: center;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover { border-color: var(--series); }
.dropzone:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; }
.dropzone.over {
  border-color: var(--series); border-style: solid;
  background: color-mix(in srgb, var(--series) 12%, var(--surface-2));
}
.dropzone.busy { cursor: default; border-style: solid; }
.drop-ico { width: 26px; height: 26px; color: var(--muted); margin-bottom: 8px; }
.dropzone:hover .drop-ico, .dropzone.over .drop-ico { color: var(--series); }
.drop-main { font-size: 14px; font-weight: 600; color: var(--ink); }
.drop-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.drop-progress { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.drop-bar { height: 5px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.drop-bar span { display: block; height: 100%; background: var(--series); border-radius: 999px; transition: width .25s ease; }

/* ---------- inline file rename ---------- */
.au-row.editing { display: block; padding-block: 14px; }
.rename-box { display: flex; flex-direction: column; gap: 6px; }
.rename-lab { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.rename-box input {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 11px; width: 100%;
}
.rename-box input:focus { outline: 2px solid var(--series); outline-offset: 0; border-color: transparent; }
.rename-hint { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.rename-actions { display: flex; gap: 8px; margin-top: 4px; }
.raw-name { opacity: .75; }

/* ---------- admin: rep identity line on a property row ---------- */
.prop-rep { display: flex; align-items: center; gap: 9px; margin-top: 7px; min-width: 0; }
.rep-thumb {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--border); background: var(--surface-2);
}
.rep-thumb.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .02em;
}
.rep-id { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rep-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.rep-mail { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.prop-row .prop-meta { margin-top: 7px; }

/* ---------- hero action buttons (print / share) ---------- */
.hero-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(245,244,250,.34);
  background: rgba(23,17,55,.5); color: var(--navy-ink);
  backdrop-filter: blur(6px);
}
.hero-act svg { width: 16px; height: 16px; }
.hero-act:hover { border-color: rgba(245,244,250,.6); }
.hero-act:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- print: A4 ---------- */
@media print {
  @page { size: A4; margin: 14mm 12mm; }

  /* Always print light — a dark theme wastes toner and reads badly on paper. */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --bg: #fff; --surface: #fff; --surface-2: #f5f5f3;
    --ink: #111; --ink-2: #333; --muted: #666;
    --grid: #ddd; --baseline: #bbb; --border: rgba(0,0,0,.2);
    --series: #4a3aa7; --series-soft: rgba(74,58,167,.14);
    --cat1: #2a78d6; --cat2: #eb6834; --cat3: #1baf7a;
    --good-text: #006300; --serious-text: #a34718;
    --navy: #171137; --navy-ink: #fff; --navy-sub: #d8d5e6;
    --shadow: none;
  }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body { background: #fff; font-size: 11pt; }

  /* interactive chrome has no meaning on paper */
  .hero-act, .theme-toggle, #tip, #toast,
  .ap-play, .ap-scrub, .ap-meta, .doc-go { display: none !important; }

  /* reveal anything the reader hadn't scrolled to yet */
  .av { opacity: 1 !important; transform: none !important; }
  .hbar .fill { width: var(--w) !important; }
  .col .bar { height: var(--h) !important; }
  .col .bar.zero { height: 2px !important; }
  .trend-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .trend-svg .tdot, .trend-svg .vlab { opacity: 1 !important; }
  details > summary { list-style: none; }
  details .chev { display: none !important; }

  /* a compact masthead rather than a full-bleed hero */
  .hero { min-height: 0 !important; padding: 0 0 10mm !important; display: block !important; }
  .hero::after { display: none; }
  .hero .wrap { gap: 10mm; }
  .hero h1 { font-size: 22pt; text-shadow: none; }
  .hero-meta { text-shadow: none; }
  .report-main { margin-top: 0 !important; }
  main.wrap { gap: 6mm; padding-block: 6mm 0; }

  /* keep a card whole on one sheet */
  .card, .insight, .site-footer, .arch-row, .doc-row, .steps li {
    break-inside: avoid; page-break-inside: avoid;
  }
  .card { box-shadow: none; }
  .site-footer { break-before: auto; margin-top: 8mm; padding-block: 8mm 0; }

  /* let long tables print in full instead of scrolling */
  .tbl-scroll { overflow: visible !important; margin-inline: 0; padding-inline: 0; }
  table { min-width: 0 !important; font-size: 9.5pt; }

  /* spell out the link behind each attachment */
  .doc-row { text-decoration: none; }
  a[href^="/api/file/"]::after { content: ""; }
}

/* ---------- end date countdown ---------- */
.countdown {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--red); border-radius: 14px;
  padding: 16px 20px; box-shadow: var(--shadow);
}
.cd-ico {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.cd-ico svg { width: 18px; height: 18px; }
.cd-body { flex: 1; min-width: 0; }
.cd-big { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.cd-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.cd-flag {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--red); border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}

/* ---------- buyer pipeline ---------- */
.pl-list { display: flex; flex-direction: column; gap: 16px; }
.pl-group { display: flex; flex-direction: column; gap: 7px; }
.pl-stage {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.pl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pl-stage.hot  { color: var(--red); }
.pl-stage.hot .pl-dot  { background: var(--red); }
.pl-stage.warm { color: var(--serious-text); }
.pl-stage.warm .pl-dot { background: var(--serious); }
.pl-stage.cool { color: var(--series); }
.pl-stage.cool .pl-dot { background: var(--series); }
.pl-count {
  font-size: 11px; font-weight: 700; letter-spacing: 0;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border); border-radius: 999px;
  min-width: 20px; text-align: center; padding: 1px 6px;
}
.pl-buyer {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.pl-who { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pl-note { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .countdown { flex-wrap: wrap; }
  .cd-flag { order: 3; }
}

/* buyer pipeline rows in the editor */
.rowline.buyerline { grid-template-columns: 1fr 150px 34px; row-gap: 6px; }
.rowline.buyerline select {
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 9px; width: 100%; cursor: pointer;
}
.rowline.buyerline .buyer-note { grid-column: 1 / -1; font-size: 12.5px; }
@media (max-width: 560px) { .rowline.buyerline { grid-template-columns: 1fr 34px; } .rowline.buyerline select { grid-column: 1 / -1; } }

/* ---------- rep playback in the voice updates panel ---------- */
.au-row { align-items: center; gap: 12px; }
.au-play {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: none; background: var(--series); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s ease, transform .15s ease;
}
.au-play svg { width: 14px; height: 14px; margin-left: 1px; }
.au-play:hover { filter: brightness(1.12); transform: scale(1.04); }
.au-play:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.au-main { flex: 1; min-width: 0; }
.au-bar {
  height: 3px; border-radius: 999px; background: var(--grid);
  margin-top: 7px; overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height .2s ease, opacity .2s ease, margin-top .2s ease;
}
.au-row.playing .au-bar { max-height: 3px; opacity: 1; }
.au-bar span { display: block; height: 100%; width: 0; background: var(--series); border-radius: 999px; }
.au-time { font-variant-numeric: tabular-nums; }

/* PDF chip in the Paste & fill attachment grid */
.shot-pdf {
  width: 100%; aspect-ratio: 4/3; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
  background: color-mix(in srgb, var(--red) 10%, var(--surface-2));
  color: var(--red);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 6px; text-align: center;
}
.shot-pdf svg { width: 20px; height: 20px; flex: none; }
.shot-pdf-name {
  font-size: 9.5px; font-weight: 600; color: var(--ink-2); line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

/* sales rep assignment select in the property editor */
.fld select {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 34px 9px 11px; width: 100%; cursor: pointer;
}
.fld select:focus { outline: 2px solid var(--series); outline-offset: 0; border-color: transparent; }

/* Paste & fill progress — a real count of the fields that have arrived */
.fillprog { margin-top: 16px; }
.fillprog-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 13px; color: var(--ink-2); margin-bottom: 7px;
}
.fillprog-top #fill-prog-pct { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.fillbar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.fillbar-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--series);
  transition: width .45s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .fillbar-fill { transition: none; } }

/* technical breadcrumbs under a fill error — meant to be screenshotted */
.errdetail {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: .75; word-break: break-word;
}

/* secondary link under an auth form */
.authalt { margin: 14px 0 0; text-align: center; font-size: 13px; }
.authalt a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.authalt a:hover { color: var(--ink); }

/* archive row: when it was sent, and when the vendor actually heard it */
.arch-when {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  white-space: nowrap; text-align: right;
}
.arch-sent { font-size: 12px; color: var(--muted); }
.arch-heard { font-size: 11.5px; color: var(--muted); opacity: .85; }

/* admin voice panel: the listened timestamp beside the receipt badge */
.au-heard { font-size: 11.5px; color: var(--muted); }

/* ---------- week by week on realestate.com.au ---------- */
.col-latest .bar { box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--series); }
.wk-tbl { margin-top: 18px; }
.wk-tbl table { min-width: 460px; }
.wk-latest {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--series); margin-left: 6px;
}
.wk-delta {
  font-size: 11.5px; font-weight: 700; margin-left: 7px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wk-delta.up { color: var(--good-text); }
.wk-delta.down { color: var(--muted); }
.wk-delta.flat { color: var(--muted); font-weight: 600; }

/* ---------- admin: team screen + list paging ---------- */
.hero-act.wide {
  width: auto; gap: 7px; padding: 0 14px;
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.hero-act.wide .btn-ico { width: 15px; height: 15px; }
.backbar { margin-bottom: 18px; }

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 18px;
}
.pager-range {
  font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.pager-of { color: var(--muted); }
.pager .abtn[disabled] { opacity: .4; cursor: default; pointer-events: none; }
@media (max-width: 560px) {
  .pager { justify-content: center; }
  .pager-range { order: -1; width: 100%; text-align: center; }
}

/* Chrome anchors the native select arrow to the BORDER box, so padding-right
   cannot move it — on a pill it ends up sitting on the curve. Draw our own
   instead, inset properly. #8b8a94 is --muted, which is the same value in both
   themes, so one colour serves light and dark. */
.filterbar select,
.fld select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238b8a94' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 1.6 6 6.4l4.8-4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
}

/* what saving will do to the weekly history */
.rd-note {
  margin: -2px 0 4px; font-size: 12.5px; color: var(--ink-2);
}
.rd-note.warn { color: var(--serious-text, #b4541f); font-weight: 600; }

/* ---------- weekly stats drawer ---------- */
.sub-lab { margin-top: 14px; }
.pill-n {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; background: var(--series-soft); color: var(--series);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
.morebox { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.morebox > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);
  list-style: none; padding: 4px 0;
}
.morebox > summary::-webkit-details-marker { display: none; }
.morebox > summary::before { content: "+ "; color: var(--series); font-weight: 700; }
.morebox[open] > summary::before { content: "\2212 "; }

/* campaign totals: one block, each stage carrying its rate and its movement */
.step .rate { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.step .delta { margin-top: 5px; }
.step-end .num { color: var(--series); }
.journey-aside {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--grid);
  font-size: 13px; color: var(--ink-2);
}
.journey-aside b { color: var(--ink); font-weight: 700; }

/* ---------- benchmark: how this campaign compares ---------- */
.bench {
  margin-top: 16px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface-2); font-size: 13.5px; color: var(--ink-2);
}
.bench p { margin: 0; }
.bench b { color: var(--ink); font-weight: 700; }
.bench-head {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.bench-foot { margin-top: 6px !important; font-size: 12px; color: var(--muted); }
.bench.ahead { border-left: 3px solid var(--good-text); }
.bench.behind { border-left: 3px solid var(--serious-text); }
.bench.level { border-left: 3px solid var(--baseline); }

/* ---------- the vendor's reply ---------- */
.reply-q { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 16px 0 10px; }
.moods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mood {
  font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
}
.mood span { font-size: 13.5px; font-weight: 700; }
.mood small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.mood:hover { border-color: var(--series); }
.mood.on { border-color: var(--series); background: var(--series-soft); }
.mood.on span { color: var(--series); }
.reply-fld { margin-top: 16px; }
.reply-fld label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 5px; }
.reply-fld textarea {
  font: inherit; font-size: 14px; width: 100%; resize: vertical;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
}
.reply-fld textarea:focus { outline: 2px solid var(--series); outline-offset: 0; border-color: transparent; }
.reply-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.reply-send {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 11px 22px; border-radius: 999px; border: none;
  background: var(--series); color: #fff;
}
.reply-send:hover { filter: brightness(1.1); }
.reply-send[disabled] { opacity: .55; cursor: default; }
.reply-msg { font-size: 12.5px; color: var(--ink-2); }
.reply-msg.warn { color: var(--serious-text); font-weight: 600; }
@media (max-width: 560px) { .moods { grid-template-columns: 1fr; } }

/* ---------- admin: messages from the vendor ---------- */
.abtn.has-new { border-color: var(--series); color: var(--series); }
.pill-n.hot { background: var(--series); color: #fff; }
.reply-row.unread { background: var(--series-soft); border-radius: 10px; padding-inline: 10px; }
.mood-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-right: 9px;
  background: var(--series-soft); color: var(--series);
}
.mood-tag.talk { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.mood-tag.none { background: var(--surface-2); color: var(--muted); }
.reply-when { font-size: 11.5px; color: var(--muted); }
.reply-text { margin: 7px 0 0; font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; }

/* when the vendor was last emailed their link */
.sent-when { font-size: 11px; color: var(--muted); margin-left: 3px; }

/* ---------- account menu: who's signed in, and the way out ---------- */
.acct { position: relative; display: inline-flex; }
.avatar {
  width: 34px; height: 34px; padding: 0; flex: none; cursor: pointer;
  border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(245,244,250,.34);
  background: rgba(23,17,55,.5); color: var(--navy-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.avatar-ph { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.avatar:hover { border-color: rgba(245,244,250,.62); }
.avatar:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.acct-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 40;
  min-width: 212px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(8,6,24,.4);
}
.acct-who { padding: 9px 11px 10px; border-bottom: 1px solid var(--grid); margin-bottom: 5px; }
.acct-who strong { display: block; font-size: 13.5px; color: var(--ink); }
.acct-who span { display: block; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.acct-menu button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13.5px;
  padding: 9px 11px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--ink);
}
.acct-menu button:hover { background: var(--surface-2); }
.acct-menu button.danger { color: var(--red); }

.drawer.narrow { max-width: 440px; }

/* Editing on a phone: one field per row below this, so a label like
   "Floorplan views" isn't wrapping inside a 104px column. */
@media (max-width: 620px) {
  .frow, .frow.three { grid-template-columns: 1fr; }
  .drawer-head, .drawer-foot, .drawer-body,
  .drawer.wide .drawer-head, .drawer.wide .drawer-foot, .drawer.wide .drawer-body { padding-inline: 16px; }
  .fgrid { grid-template-columns: 1fr 1fr; }
}
/* Only the very narrowest phones drop to one. A number field is short, so two
   across fits at 375px and halves the scrolling through seven portal figures. */
@media (max-width: 359px) {
  .fgrid { grid-template-columns: 1fr; }
}

/* ---------- flow button: the primary AI entry point ----------
   Outlined pill that squares off and floods with colour on hover, with the
   arrows sliding through and the label shifting across. Built in plain CSS
   rather than pulling in React, Tailwind and shadcn for one button. */
.flowbtn {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  overflow: hidden; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 12px 30px; border-radius: 100px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 38%, transparent);
  background: transparent; color: var(--ink);
  transition:
    border-color .6s cubic-bezier(.23, 1, .32, 1),
    border-radius .6s cubic-bezier(.23, 1, .32, 1),
    color .6s cubic-bezier(.23, 1, .32, 1),
    transform .12s ease;
}
.flowbtn:hover { border-color: transparent; border-radius: 12px; color: #fff; }
.flowbtn:active { transform: scale(.95); }
.flowbtn:focus-visible { outline: 2px solid var(--series); outline-offset: 3px; }

/* The wash that fills the button from its centre. */
.fb-circle {
  position: absolute; top: 50%; left: 50%; z-index: 0;
  width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--series); opacity: 0;
  transition: width .8s cubic-bezier(.19, 1, .22, 1),
              height .8s cubic-bezier(.19, 1, .22, 1),
              opacity .8s cubic-bezier(.19, 1, .22, 1);
}
.flowbtn:hover .fb-circle { width: 420px; height: 420px; opacity: 1; }

.fb-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  transform: translateX(-12px);
  transition: transform .8s ease;
}
.flowbtn:hover .fb-label { transform: translateX(12px); }

/* One arrow waits off the left edge and slides in; the other leaves right. */
.fb-arr {
  position: absolute; z-index: 9; width: 16px; height: 16px;
  transition: left .8s cubic-bezier(.34, 1.56, .64, 1),
              right .8s cubic-bezier(.34, 1.56, .64, 1);
}
.fb-arr:first-of-type { left: -25%; }
.flowbtn:hover .fb-arr:first-of-type { left: 16px; }
.fb-arr:last-of-type { right: 16px; }
.flowbtn:hover .fb-arr:last-of-type { right: -25%; }

.flowbtn .btn-ico {
  width: 16px; height: 16px; flex: none;
  /* The shared icon rule adds margin-right: 6px, which stacked on top of the
     flex gap and made the spacing twice what it looked in the CSS. */
  margin-right: 0; vertical-align: 0;
}

/* Nothing should slide or bloom for someone who asked it not to. */
@media (prefers-reduced-motion: reduce) {
  .flowbtn, .fb-circle, .fb-label, .fb-arr { transition: none; }
  .flowbtn:hover .fb-circle { width: 420px; height: 420px; }
}

/* Row-sized flow button: same mechanics, scaled so it sits in a row of
   seven actions without shouting over them. */
.flowbtn.sm {
  font-size: 12.5px; font-weight: 600;
  padding: 7px 22px; gap: 3px;
}
.flowbtn.sm .fb-arr { width: 13px; height: 13px; }
.flowbtn.sm .fb-arr:first-of-type { left: -30%; }
.flowbtn.sm:hover .fb-arr:first-of-type { left: 9px; }
.flowbtn.sm .fb-arr:last-of-type { right: 9px; }
.flowbtn.sm:hover .fb-arr:last-of-type { right: -30%; }
.flowbtn.sm .fb-label { transform: translateX(-8px); }
.flowbtn.sm:hover .fb-label { transform: translateX(8px); }
.flowbtn.sm:hover .fb-circle { width: 260px; height: 260px; }
.flowbtn.sm .btn-ico { width: 14px; height: 14px; }
.flowbtn.sm .fb-label { gap: 4px; }

/* ---------- the sparkle, gently alive ----------
   A hover effect says nothing on a phone, where there is no hover. This runs
   at rest so the button still reads as "AI" on touch. Slow and low-amplitude
   on purpose: it should catch the eye once, not nag. */
.ai-ico .sp-1,
.ai-ico .sp-2,
.ai-ico .sp-3 {
  transform-box: fill-box;
  transform-origin: center;
}
.ai-ico .sp-1 { animation: sparkle-main 3.4s ease-in-out infinite; }
.ai-ico .sp-2 { animation: sparkle-small 3.4s ease-in-out infinite .4s; }
.ai-ico .sp-3 { animation: sparkle-small 3.4s ease-in-out infinite 1.5s; }

@keyframes sparkle-main {
  0%, 100% { transform: scale(1); opacity: 1; }
  45%      { transform: scale(1.09) rotate(8deg); opacity: .9; }
}
@keyframes sparkle-small {
  0%, 100% { transform: scale(.78); opacity: .4; }
  40%      { transform: scale(1.18); opacity: 1; }
  70%      { transform: scale(.9); opacity: .6; }
}

/* On hover the twinkle gets a little livelier, then settles. */
.flowbtn:hover .ai-ico .sp-1 { animation-duration: 1.6s; }
.flowbtn:hover .ai-ico .sp-2,
.flowbtn:hover .ai-ico .sp-3 { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .ai-ico .sp-1, .ai-ico .sp-2, .ai-ico .sp-3 { animation: none; opacity: 1; }
}

/* ---------- what needs attention ---------- */
.triage {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  border-left: 3px solid var(--serious-text);
}
.triage.clear { border-left-color: var(--good-text); color: var(--ink-2); font-size: 13px; }
.tri-tick { color: var(--good-text); font-weight: 800; margin-right: 7px; }
.tri-head { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tri-head b { color: var(--serious-text); }
.tri-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tri-chip {
  font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2);
}
.tri-chip b { color: var(--ink); }
.tri-chip:hover { border-color: var(--series); color: var(--series); }
.tri-chip.on { border-color: var(--series); background: var(--series-soft); color: var(--series); }
.tri-chip.on b { color: var(--series); }
.tri-chip.clearbtn { background: transparent; }
.never-opened { color: var(--serious-text); font-weight: 600; }
@media (max-width: 560px) { .triage { align-items: flex-start; flex-direction: column; gap: 10px; } }

/* ---------- platform console ---------- */
.plat-mark {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--series);
  border: 1px solid var(--series); border-radius: 999px; padding: 4px 11px; margin-bottom: 18px;
}
.plat-mark.big {
  margin: 0; font-size: 12px; color: var(--navy-ink);
  border-color: rgba(245,244,250,.34); background: rgba(23,17,55,.42);
}
.plat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.plat-bar b { color: var(--ink); }
.plat-bar span { font-size: 13.5px; color: var(--ink-2); }
.plat-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plat-main { min-width: 0; }
.plat-name { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plat-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.plat-store { opacity: .6; }
.plat-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.plat-meta b { color: var(--ink); }
.plat-notes { margin: 9px 0 0; font-size: 12.5px; color: var(--muted); }
.plat-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.st {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
}
.st-active  { color: var(--good-text); border-color: color-mix(in srgb, var(--good-text) 45%, transparent); }
.st-trial   { color: var(--series); border-color: color-mix(in srgb, var(--series) 45%, transparent); }
.st-past_due{ color: var(--serious-text); border-color: color-mix(in srgb, var(--serious-text) 45%, transparent); }
.st-suspended { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.st-cancelled { color: var(--muted); }

/* an agency's own mark, in place of the built-in wordmark */
.brand-logo { display: block; height: 41px; width: auto; max-width: 240px; object-fit: contain; }
.auth-card .brand-logo { height: 38px; }

/* ---------- agency branding page ---------- */
.logo-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 108px; border-radius: 12px; padding: 18px;
  border: 1px solid var(--border);
}
.logo-preview img { max-height: 56px; max-width: 70%; object-fit: contain; }
.logo-empty { font-size: 12.5px; color: rgba(245,244,250,.62); }
.swatchrow { display: flex; gap: 8px; align-items: center; min-width: 0; }
/* `.fld input { width: 100% }` outranks a lone .swatch, which stretched the
   picker across the row and pushed the hex field out of the drawer. */
.fld .swatch, .swatch {
  width: 44px; height: 38px; flex: none; padding: 2px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
}
.swatchrow input:not(.swatch) { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Team / Branding tabs in the owner's admin area */
.atabs { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.atab {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2);
}
.atab:hover { border-color: var(--series); color: var(--series); }
.atab.on { border-color: var(--series); background: var(--series-soft); color: var(--series); }

/* an agency's mark beside its details in the platform console */
/* The basis keeps the details readable: below it the action buttons wrap
   to their own line rather than squeezing the name to one word a row. */
.plat-id { display: flex; align-items: flex-start; gap: 14px; flex: 1 1 260px; min-width: 0; }
.plat-tile {
  flex: none; width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--border);
}
.plat-tile img { max-width: 44px; max-height: 40px; object-fit: contain; }
.plat-tile span {
  font-size: 15px; font-weight: 800; letter-spacing: .02em; color: #f5f4fa;
}

/* Campaign figures at a glance in the editor, in place of the old portal
   input boxes — the numbers now live in dated reports, not on the property. */
.sumgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sumcell {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2);
}
.sumv { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.suml { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .sumgrid { grid-template-columns: 1fr; } }

/* Edit / remove on a logged weekly report */
.au-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.mini-btn.on {
  background: var(--series); border-color: var(--series); color: #fff;
}

/* A rep previewing their own vendor link: says plainly that the look wasn't
   logged, so "0 opens" after checking the page isn't a worry. */
.previewbar {
  position: sticky; top: 0; z-index: 40;
  padding: 9px 16px; text-align: center;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  color: #f5f4fa; background: #4a3aa7;
}
@media print { .previewbar { display: none; } }

/* ------------------------------------------------------------------ *
 * Touch devices: hold the page still
 *
 * iOS zooms the whole page in whenever a form control smaller than 16px
 * takes focus, and leaves it zoomed and panned afterwards — which reads as
 * "the screen moves around on its own". The cure is the font size, not a
 * viewport flag: Safari ignores user-scalable=no precisely so that people
 * can still zoom. 16px everywhere a finger can land removes the trigger.
 * ------------------------------------------------------------------ */
@media (pointer: coarse) {
  .fld input, .fld textarea, .fld select,
  .rowline input, .rowline.buyerline select,
  .filterbar select,
  input, textarea, select {
    font-size: 16px;
  }
  /* The swatch is a colour well, not text — keep it compact. */
  .fld .swatch, .swatch { font-size: inherit; }
  /* The read-only vendor link box is still a text input a thumb can land in. */
  .linkline input { font-size: 16px; }
}