/* CalgaryListings Group — client portal */
:root{
  /* brand palette — matches calgarylistings.com */
  --teal:#012F38;          /* brand ink (deep) */
  --teal-soft:#0d4552; --teal-accent:#48A3A6;  /* true brand teal */
  --green:#6ABA5A; --green-dark:#4e9a40; --lime:#A2C243;
  --paper:#F7F7F5; --card:#ffffff; --ink:#1d2b30; --muted:#5A5A5A;
  --line:#E4E4E0; --rad:18px; --rad-sm:12px;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Poppins',system-ui,-apple-system,sans-serif;
  --grad:linear-gradient(135deg,var(--teal-accent),var(--green));
  --brandbar:linear-gradient(to right,var(--teal-accent),var(--green),var(--lime));
  --shadow:0 1px 2px rgba(1,47,56,.05),0 8px 28px rgba(1,47,56,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);
  color:var(--ink);font-size:16px;line-height:1.55;min-height:100vh}
img{max-width:100%;display:block}
a{color:var(--teal-accent);text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3{color:var(--teal);font-weight:700;line-height:1.22;font-family:var(--serif)}
h1{font-size:1.7rem}h2{font-size:1.28rem}h3{font-size:1.08rem}
.greet,.price,.mnum .v,.auth-logo b,.wordmark{font-family:var(--serif)}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* ── shell ── */
#shell{display:none;min-height:100vh}
#shell.on{display:block}
main{max-width:980px;margin:0 auto;padding:22px 18px 96px}
@media(min-width:900px){
  #shell.on{display:grid;grid-template-columns:232px 1fr}
  main{padding:34px 40px 60px;width:100%}
}

/* side nav (desktop) */
#sidenav{display:none}
@media(min-width:900px){
  #sidenav{display:flex;flex-direction:column;background:var(--teal);color:#fff;
    padding:26px 14px;position:sticky;top:68px;height:calc(100vh - 68px);
    border-right:3px solid transparent;border-image:var(--brandbar) 1}
  #sidenav .brand{font-family:var(--serif);font-weight:700;font-size:1.12rem;color:#fff;
    padding:0 12px 24px;letter-spacing:.2px}
  #sidenav .brand span{color:var(--green)}
  #sidenav a.nv{display:flex;align-items:center;gap:12px;color:#cfe0e3;padding:12px 14px;
    border-radius:12px;font-weight:500;margin-bottom:4px;transition:background .15s}
  #sidenav a.nv svg{width:21px;height:21px;flex:0 0 21px}
  #sidenav a.nv.on{background:rgba(255,255,255,.12);color:#fff}
  #sidenav a.nv:hover{background:rgba(255,255,255,.08);color:#fff}
  #sidenav .foot{margin-top:auto;padding:14px 12px 0;border-top:1px solid rgba(255,255,255,.14)}
  #sidenav .foot .aghint{display:flex;gap:10px;align-items:center;color:#cfe0e3;font-size:.85rem}
  #sidenav .foot img{width:38px;height:38px;border-radius:50%;object-fit:cover}
  #sidenav .foot button{color:#9fb8bd;font-size:.8rem;margin-top:12px;padding:0}
  #sidenav .foot button:hover{color:#fff}
}

/* bottom nav (mobile) */
#bottomnav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;
  border-top:1px solid var(--line);z-index:60;padding-bottom:env(safe-area-inset-bottom)}
#bottomnav.on{display:flex}
#bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 2px 7px;color:var(--muted);font-size:.66rem;font-weight:500}
#bottomnav a svg{width:22px;height:22px}
#bottomnav a.on{color:var(--teal)}
#bottomnav a.on svg{stroke:var(--green)}
@media(min-width:900px){#bottomnav{display:none!important}}

/* ── cards & buttons ── */
.card{background:var(--card);border-radius:var(--rad);box-shadow:var(--shadow);
  padding:22px;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--grad);color:#fff;font-weight:600;padding:12px 22px;
  border-radius:999px;transition:box-shadow .2s,transform .15s,filter .2s;font-size:.95rem;
  box-shadow:0 3px 12px rgba(72,163,166,.3)}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 6px 18px rgba(72,163,166,.42)}
.btn.ghost{background:none;color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--teal-accent);color:var(--teal-accent);filter:none;transform:none}
.btn.teal{background:var(--teal-accent);box-shadow:0 3px 12px rgba(72,163,166,.28)}
.btn.teal:hover{background:var(--teal-soft)}
.btn.sm{padding:8px 16px;font-size:.85rem}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;background:#eef4ee;color:var(--teal);
  font-size:.78rem;font-weight:600;border-radius:999px;padding:4px 12px}
.pill{display:inline-block;background:var(--teal);color:#fff;font-size:.72rem;
  font-weight:600;border-radius:999px;padding:3px 10px}
.pill.green{background:var(--green)}

/* ── login ── */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--teal) 0%,#0a3d49 60%,#0f4c5a 100%);padding:22px}
#login .box{background:#fff;border-radius:22px;padding:38px 32px;max-width:400px;width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,.35);border-top:5px solid transparent;border-image:var(--brandbar) 1;
  border-radius:22px 22px 22px 22px}
#login .wordmark{font-weight:700;font-size:1.4rem;color:var(--teal);margin-bottom:4px}
#login .wordmark span{color:var(--green)}
#login p.sub{color:var(--muted);font-size:.92rem;margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--teal);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);
  border-radius:12px;padding:12px 14px;font:inherit;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green)}
.err{color:#b3423a;font-size:.85rem;margin:8px 0 0;display:none}
.err.on{display:block}

/* ── home ── */
.greet{font-size:1.7rem;font-weight:700;color:var(--teal);margin-bottom:4px}
.greet-sub{color:var(--muted);margin-bottom:22px}
.focus{background:linear-gradient(135deg,var(--teal),#0b4350);color:#fff;border-radius:var(--rad);
  padding:28px 26px;margin-bottom:18px;box-shadow:var(--shadow)}
.focus h2{color:#fff;font-size:1.3rem;margin-bottom:8px}
.focus p{color:#cfe0e3;margin-bottom:18px;max-width:520px}
.focus .btn{background:var(--green)}
.agentbar{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--rad);
  box-shadow:var(--shadow);padding:14px 18px;margin-bottom:18px}
.agentbar img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.agentbar .who{flex:1;min-width:0}
.agentbar .who b{color:var(--teal)}
.agentbar .who div{font-size:.82rem;color:var(--muted)}
.agentbar .acts{display:flex;gap:8px}
.agentbar .acts a{width:38px;height:38px;border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center;color:var(--teal)}
.agentbar .acts a:hover{background:#edf3ee}
.agentbar .acts svg{width:18px;height:18px}
.feed{list-style:none}
.feed li{display:flex;gap:13px;padding:12px 2px;border-bottom:1px solid var(--line);align-items:flex-start}
.feed li:last-child{border-bottom:0}
.feed .ic{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#eef4ee;
  display:flex;align-items:center;justify-content:center;color:var(--green-dark)}
.feed .ic svg{width:16px;height:16px}
.feed .tx{flex:1;font-size:.93rem}
.feed time{font-size:.75rem;color:var(--muted);white-space:nowrap;padding-top:2px}

/* ── tabs ── */
.tabs{display:flex;gap:6px;background:#edeae3;border-radius:999px;padding:4px;margin-bottom:20px;width:max-content;max-width:100%}
.tabs button{flex:0 0 auto;padding:9px 20px;border-radius:999px;font-weight:600;color:var(--muted);font-size:.9rem}
.tabs button.on{background:#fff;color:var(--teal);box-shadow:0 1px 4px rgba(0,0,0,.09)}

/* ── property cards ── */
.pgrid{display:grid;gap:16px}
@media(min-width:640px){.pgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.pgrid.three{grid-template-columns:1fr 1fr 1fr}}
.prop{background:#fff;border-radius:var(--rad);box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;position:relative;cursor:pointer;
  transition:transform .15s,box-shadow .15s}
.prop:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(1,47,56,.08),0 16px 40px rgba(1,47,56,.12)}
.prop .ph{height:185px;background:#dfe7e2 center/cover no-repeat;position:relative}
.prop .flag{position:absolute;top:12px;left:12px}
.prop .saveb{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.prop .saveb svg{width:18px;height:18px}
.prop .saveb.sv{color:#c0392b}
.prop .bd{padding:15px 17px 17px;flex:1;display:flex;flex-direction:column;gap:4px}
.prop .price{font-weight:700;color:var(--teal);font-size:1.12rem}
.prop .addr{font-size:.92rem}
.prop .meta{font-size:.82rem;color:var(--muted)}
.prop .note{background:#f2f7f0;border-left:3px solid var(--green);border-radius:8px;
  padding:9px 12px;font-size:.86rem;margin-top:8px;color:var(--ink)}
.prop .note b{color:var(--green-dark);font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;display:block}
.prop .acts{display:flex;gap:8px;margin-top:12px}
.rate{display:flex;gap:6px;margin-top:10px}
.rate button{flex:1;border-radius:10px;padding:7px 4px;font-size:.8rem;font-weight:600;
  background:var(--paper);color:var(--muted);border:1.5px solid transparent}
.rate button.on.love{background:#fdeeec;color:#c0392b;border-color:#eab8b2}
.rate button.on.maybe{background:#fdf6e4;color:#96731d;border-color:#e8d296}
.rate button.on.no{background:#eef0f0;color:#4a5a5f;border-color:#c7d0d2}

/* ── search ── */
.srow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.srow>*{flex:1 1 130px}
.srow .field{margin:0}
.viewtog{display:flex;gap:6px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
#smap{height:430px;border-radius:var(--rad);box-shadow:var(--shadow);display:none;z-index:1}
#smap.on{display:block}

/* ── plan ── */
.journey{display:flex;gap:0;overflow-x:auto;padding:6px 2px 18px;scrollbar-width:none}
.journey::-webkit-scrollbar{display:none}
.jstep{display:flex;flex-direction:column;align-items:center;min-width:96px;position:relative;
  font-size:.74rem;color:var(--muted);text-align:center;font-weight:500;cursor:pointer}
.jstep:hover .nub{border-color:var(--green)}
.jstep.sel:not(.cur){color:var(--teal);font-weight:700}
.jstep.sel:not(.cur) .nub{border-color:var(--teal);box-shadow:0 0 0 4px rgba(1,47,56,.12)}
.jstep .nub{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:7px;z-index:1;
  color:#fff;font-size:.7rem;font-weight:700}
.jstep.done .nub{background:var(--green);border-color:var(--green)}
.jstep.cur .nub{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 5px rgba(106,186,90,.25)}
.jstep.cur{color:var(--teal);font-weight:700}
.jstep::before{content:"";position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--line)}
.jstep:first-child::before{display:none}
.jstep.done::before,.jstep.cur::before{background:var(--green)}
.duo{display:grid;gap:14px;margin-top:14px}
@media(min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.duo .card{margin:0}
.duo h3{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.steps{list-style:none;display:flex;flex-direction:column;gap:12px}
.steps li{background:#fff;border-radius:var(--rad);box-shadow:var(--shadow);padding:17px 19px;
  display:flex;gap:14px;align-items:flex-start}
.steps .n{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--green);
  color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.steps b{color:var(--teal)}
.steps .due{font-size:.78rem;color:#96731d;font-weight:600}
.doc{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.doc:last-child{border:0}
.doc svg{width:20px;height:20px;color:var(--muted);flex:0 0 20px}
.doc .t{flex:1;font-size:.92rem}
.doc .t .small{color:var(--muted)}
.appt{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.appt:last-child{border:0}
.appt .cal{flex:0 0 54px;text-align:center;background:var(--paper);border-radius:12px;padding:7px 4px}
.appt .cal .mo{font-size:.66rem;font-weight:700;color:#b3423a;text-transform:uppercase}
.appt .cal .da{font-size:1.3rem;font-weight:700;color:var(--teal);line-height:1.1}
.appt .in{flex:1}
.appt .in b{color:var(--teal)}

/* ── market ── */
.mnum{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:16px}
@media(min-width:560px){.mnum{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.mnum{grid-template-columns:repeat(5,1fr)}}
.mnum .card{margin:0;padding:13px 10px;text-align:center}
.mnum .v{font-size:clamp(1rem,1.5vw,1.28rem);font-weight:700;color:var(--teal);line-height:1.15;white-space:nowrap}
.mnum .l{font-size:.75rem;font-weight:600;margin-top:3px;line-height:1.2}
.mnum .h{font-size:.66rem;color:var(--muted);margin-top:2px;line-height:1.25}
.commentary{border-left:4px solid var(--green)}
.commentary .byline{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.commentary .byline img{width:40px;height:40px;border-radius:50%;object-fit:cover}

/* ── messages ── */
#thread{display:flex;flex-direction:column;gap:10px;padding:6px 0 14px;min-height:200px}
.msg{max-width:78%;padding:11px 15px;border-radius:16px;font-size:.94rem;position:relative}
.msg.client{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:4px}
.msg.agent{align-self:flex-start;background:#fff;box-shadow:var(--shadow);border-bottom-left-radius:4px}
.msg .ctx{display:inline-block;font-size:.72rem;font-weight:600;border-radius:999px;
  padding:2px 10px;margin-bottom:6px;background:rgba(106,186,90,.18);color:var(--green-dark)}
.msg.client .ctx{background:rgba(255,255,255,.18);color:#d9efd4}
.msg time{display:block;font-size:.68rem;opacity:.65;margin-top:4px}
.composer{position:sticky;bottom:76px;display:flex;gap:8px;background:#fff;border-radius:999px;
  box-shadow:var(--shadow);padding:7px 7px 7px 18px;align-items:center}
@media(min-width:900px){.composer{bottom:12px}}
.composer input{flex:1;border:0;font:inherit;outline:none;background:none}
.composer button{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 42px}
.composer button svg{width:18px;height:18px}
.qacts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.qacts button{background:#fff;box-shadow:var(--shadow);border-radius:999px;padding:8px 15px;
  font-size:.82rem;font-weight:600;color:var(--teal)}

/* ── listing detail ── */
.gal{display:grid;grid-template-columns:2fr 1fr;gap:8px;border-radius:var(--rad);overflow:hidden;margin-bottom:18px}
.gal div{background:#dfe7e2 center/cover no-repeat;cursor:pointer}
.gal .main{height:340px;grid-row:span 2}
.gal .side{height:166px}
@media(max-width:640px){.gal{grid-template-columns:1fr}.gal .side{display:none}.gal .main{height:250px}}
.dhead{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.dhead .price{font-size:1.7rem;font-weight:700;color:var(--teal)}
.insight{background:#f2f7f0;border-left:4px solid var(--green);border-radius:var(--rad-sm);padding:16px 18px;margin-bottom:16px}
.insight b{color:var(--green-dark);font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px}
.featgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:.9rem}
@media(min-width:700px){.featgrid{grid-template-columns:1fr 1fr 1fr}}
.featgrid div b{color:var(--teal);font-weight:600}
#dmap{height:280px;border-radius:var(--rad);z-index:1}
.costrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.costrow:last-of-type{border:0}
.costrow.total{font-weight:700;color:var(--teal);border-top:2px solid var(--line);padding-top:10px}

/* ── modal / sheet ── */
#ovl{position:fixed;inset:0;background:rgba(1,26,32,.55);z-index:10000;display:none;
  align-items:flex-end;justify-content:center}
@media(min-width:700px){#ovl{align-items:center}}
#ovl.on{display:flex}
#sheet{background:var(--paper);border-radius:22px 22px 0 0;max-width:560px;width:100%;
  max-height:88vh;overflow-y:auto;padding:26px 22px 30px}
@media(min-width:700px){#sheet{border-radius:22px}}
.tapopts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.tapopts button{background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:.88rem;font-weight:500}
.tapopts button.on{background:var(--teal);border-color:var(--teal);color:#fff}

/* ── onboarding ── */
#onb .dots{display:flex;gap:6px;margin-bottom:22px}
#onb .dots i{width:26px;height:5px;border-radius:99px;background:var(--line)}
#onb .dots i.on{background:var(--green)}

/* misc */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;background:var(--teal);
  color:#fff;border-radius:999px;padding:11px 22px;font-size:.9rem;z-index:120;
  box-shadow:0 8px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .25s;pointer-events:none}
@media(min-width:900px){.toast{bottom:30px}}
.toast.on{opacity:1}
.empty{color:var(--muted);text-align:center;padding:34px 10px;font-size:.94rem}
.sk{background:linear-gradient(90deg,#ece9e2,#f5f3ee,#ece9e2);background-size:200% 100%;
  animation:sk 1.2s infinite;border-radius:var(--rad);height:120px;margin-bottom:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.disc{font-size:.76rem;color:var(--muted);margin-top:12px}
.secthead{display:flex;justify-content:space-between;align-items:baseline;margin:26px 0 12px}
.secthead h2{margin:0}
hr.sep{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ── personalization onboarding wizard ── */
.ob-wrap{max-width:520px;margin:0 auto;padding:24px 18px 60px}
.ob-progress{margin-bottom:20px}
.ob-bar{height:6px;border-radius:5px;background:var(--line);overflow:hidden}
.ob-bar i{display:block;height:100%;background:linear-gradient(to right,var(--teal),var(--green));transition:width .35s}
.ob-step{margin-top:8px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ob-h{font-size:1.5rem;margin-bottom:6px}
.ob-lead{margin:0 0 18px;font-size:.92rem}
.ob-q{font-size:1.5rem;font-weight:600;line-height:1.2;margin-bottom:4px}
.ob-sub{margin:0 0 18px;font-size:.9rem}
.ob-opts{display:flex;flex-direction:column;gap:9px}
.ob-opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--rad-sm);background:var(--card);
  cursor:pointer;transition:border-color .15s,background .15s}
.ob-opt:hover{border-color:var(--green)}
.ob-opt.on{border-color:var(--green);background:rgba(106,186,90,.07);box-shadow:0 0 0 3px rgba(106,186,90,.12)}
.ob-box{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-top:1px;transition:all .15s}
.ob-box.sq{border-radius:6px}
.ob-opt.on .ob-box{background:var(--green);border-color:var(--green)}
.ob-box svg{width:12px;height:12px}
.ob-l{display:block;font-weight:600;font-size:.98rem;color:var(--ink)}
.ob-d{display:block;font-size:.82rem;color:var(--muted);margin-top:2px;line-height:1.45}
.ob-max{font-size:.78rem;color:var(--teal);font-weight:600;margin-bottom:9px}
.ob-chips{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px}
.ob-chip{font-size:.78rem;padding:4px 10px;border-radius:50px;background:#eef2ee;color:var(--teal);
  font-weight:600;cursor:pointer;border:1px solid var(--line)}
.ob-check{display:flex;gap:9px;align-items:center;font-size:.86rem;color:var(--muted);margin-top:12px;cursor:pointer}
.ob-check input{width:18px;height:18px;accent-color:var(--green)}
.ob-nav{display:flex;gap:10px;margin-top:22px}
.ob-nav .btn{flex:1}

/* ── market buyer/seller gauge ── */
.gauge{position:relative;margin:4px 0 2px}
.gauge-track{height:34px;border-radius:9px;overflow:hidden;display:flex;
  font-size:.62rem;font-weight:700;letter-spacing:.02em;color:#fff}
.gauge .gz{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 2px}
.gauge .gz-s{flex:0 0 25%;background:var(--green)}
.gauge .gz-b{flex:0 0 25%;background:var(--lime);color:var(--teal)}
.gauge .gz-y{flex:1;background:var(--teal-accent)}
.gauge-marker{position:absolute;top:-5px;width:3px;height:44px;background:var(--teal);border-radius:2px;
  box-shadow:0 0 0 2px #fff;transform:translateX(-50%)}
.gauge-marker::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--teal)}
.gauge-legend{display:flex;justify-content:space-between;margin-top:7px;font-size:.72rem;color:var(--muted)}

/* ── sold comparables rows ── */
.comprow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.comprow:last-of-type{border-bottom:none}

/* ── interactive monthly cost calculator ── */
.mcalc{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.mctl-wide{grid-column:1/-1}
.mctl label{display:block;font-size:.78rem;font-weight:600;margin-bottom:7px;color:var(--ink)}
.mctl label b{color:var(--teal-accent);font-weight:700}
.mctl input[type=range]{width:100%;accent-color:var(--green);height:6px;cursor:pointer}
.mc-in{display:flex;align-items:center;gap:4px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;background:#fff}
.mc-in input{border:0;background:none;padding:10px 0;width:100%;font-size:.95rem;color:var(--ink)}
.mc-in input:focus{outline:none}
.mc-in span{color:var(--muted);font-weight:600}
.mctl select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-size:.95rem;color:var(--ink)}
.costrow.sub{border:0;padding:2px 0 8px;margin-top:-4px}
.costrow.sub span{font-size:.78rem;color:var(--muted);font-style:italic}
.mc-warn{font-size:.8rem;color:var(--ink);background:var(--paper);border-left:3px solid var(--lime);
  padding:8px 11px;border-radius:8px;margin-bottom:10px}

/* ── accepted offer tracker ── */
.offer-cta{display:flex;align-items:center;gap:12px;text-decoration:none;
  background:linear-gradient(100deg,var(--teal),var(--teal-accent));color:#fff;
  border-radius:var(--rad);padding:14px 18px;margin-bottom:18px;
  box-shadow:var(--shadow);font-size:.95rem;line-height:1.35}
.offer-cta b{display:block;font-weight:700}
.offer-cta .arr{margin-left:auto;font-size:1.3rem;opacity:.9}
.offer-cta:hover{filter:brightness(1.05)}
.otabs{display:flex;gap:8px;margin-bottom:14px}
.otab{border:1.5px solid var(--line);background:#fff;color:var(--teal);border-radius:999px;
  padding:8px 18px;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer}
.otab.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.offer-head .ohrow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.offer-head .obig{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;color:var(--teal)}
.offer-head .ometa{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink)}
.odays{display:flex;flex-direction:column;gap:2px}
.oday{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.oday:last-child{border-bottom:none}
.oday .t{flex:1}
.ochip{flex:0 0 auto;background:#eef4ee;color:var(--green-dark);border-radius:999px;
  padding:5px 12px;font-size:.82rem;font-weight:600;white-space:nowrap}
.ochip.due{background:#fbeee0;color:#96731d}
.ochip.past{background:#f0eeee;color:var(--muted)}
.osteps{display:flex;flex-direction:column;gap:2px}
.ostep{display:flex;align-items:flex-start;gap:12px;padding:12px 2px;
  border-bottom:1px solid var(--line);cursor:pointer}
.ostep:last-child{border-bottom:none}
.ostep input{accent-color:var(--green);width:20px;height:20px;flex:0 0 20px;margin-top:1px}
.ostep .t{flex:1}
.ostep.done .t b{color:var(--muted);text-decoration:line-through}
.ockrow{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem;margin:4px 0 4px}
.ockrow input{accent-color:var(--green);width:18px;height:18px;flex:0 0 18px}

/* ── preferred-provider booking ── */
.bookrow{margin:8px 0 6px 32px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bookrow .disc{flex-basis:100%;margin:2px 0 0;font-style:italic}
.svc-card{border-left:4px solid var(--teal-accent)}
.disc-box{font-size:.82rem;color:var(--muted);font-style:italic;background:var(--paper);
  border-radius:10px;padding:10px 12px}
.linkbtn{background:none;border:none;color:var(--teal-accent);font:inherit;font-weight:600;
  cursor:pointer;text-decoration:underline;padding:6px}
.bookedcard{margin:8px 0 6px 32px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px}
.bookedcard .bh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:3px}
.bkbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bkctx{background:var(--paper);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.bkmeta{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.bkmeta div{display:flex;flex-direction:column}
.bkmeta span{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.bkmeta b{font-size:.92rem}
.provcard{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  margin-bottom:8px;cursor:pointer;font:inherit}
.provcard:hover{border-color:var(--teal-accent)}
.provcard b{font-size:1rem}
.slotday{margin-bottom:12px}
.slotday .sd{font-weight:600;font-size:.9rem;margin-bottom:6px}
.slotday .slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;
  font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;color:var(--teal)}
.slot:hover{border-color:var(--teal-accent);color:var(--teal-accent)}
.slot.tight{border-color:var(--lime)}
.slot.late{border-color:#e0b352;color:#96731d}
.ckrow{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.9rem;margin:8px 0}
.ckrow input{accent-color:var(--green);width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.assist-note{display:flex;gap:12px;align-items:flex-start;background:var(--paper);
  border-radius:12px;padding:14px;margin-bottom:14px}
.assist-note svg{width:26px;height:26px;flex:0 0 26px;color:var(--teal-accent)}
.confirm-line{font-size:1.05rem;line-height:1.5;background:var(--paper);border-radius:12px;
  padding:14px;margin-bottom:10px}
.bkdone{text-align:center;padding:8px 4px}
.bkdone svg{width:44px;height:44px;color:var(--green);margin-bottom:6px}
.bkdone h2{margin:4px 0 8px}

/* ── "what you're looking for" preference card + chips ── */
.lf-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;
  border-left:4px solid var(--lime)}
.lf-card .btn{flex:0 0 auto}
.chipset{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chipopt{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;
  font:inherit;font-weight:600;font-size:.85rem;color:var(--teal);cursor:pointer}
.chipopt:hover{border-color:var(--teal-accent)}
.chipopt.on{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ── offer important-dates: date + time pairs ── */
.dtgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.dtf{margin:0}
.dtrow{display:flex;gap:6px}
.dtrow input[type=date]{flex:1 1 auto;min-width:0}
.dtrow input[type=time]{flex:0 0 96px}
@media(max-width:560px){.dtgrid{grid-template-columns:1fr}}

/* ── tour route map ── */
.tourmap{height:240px;border-radius:12px;margin-top:10px;border:1px solid var(--line);z-index:0}
.tm-pin{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;
  box-shadow:0 2px 6px rgba(1,47,56,.35);border:2px solid #fff}

/* ── seller finale: lawyers confirmed / keys released ── */
.ostep.agentstep{cursor:default;background:var(--paper);border-radius:10px;padding:12px}
.ostep.agentstep .lockic{font-size:1.2rem;flex:0 0 24px;text-align:center}
.keysdone{display:flex;gap:12px;align-items:flex-start;font-size:1.5rem;
  background:linear-gradient(120deg,rgba(106,186,90,.14),rgba(72,163,166,.12));
  border:1px solid var(--green);border-radius:12px;padding:16px;margin:8px 0}
.keysdone div{font-size:.95rem;line-height:1.5}
.keysdone b{color:var(--teal)}
.keysdone span{display:block;color:var(--green-dark);font-weight:700;font-size:1.05rem;margin-top:2px}

/* ── richer property cards ── */
.prop .price .ppsf{font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:500;color:var(--muted);margin-left:8px}
.prop .meta2{font-size:.76rem;color:var(--muted);margin-top:2px}
.prop .ohpill{display:inline-block;background:rgba(162,194,67,.18);color:#5c7a12;font-size:.75rem;
  font-weight:600;border-radius:999px;padding:3px 11px;margin-top:7px}

/* ── my-listing photo strip ── */
.ml-photos{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.ml-photos div{aspect-ratio:4/3;background-size:cover;background-position:center;border-radius:8px;cursor:pointer}
.ml-photos div:hover{filter:brightness(1.06)}
@media(max-width:700px){.ml-photos{grid-template-columns:repeat(3,1fr)}}

/* ── tour map dot pins + comparison table ── */
.tm-pin.tm-dot{width:22px;height:22px;background:var(--teal-accent)}
table.cmp{width:100%;border-collapse:collapse;font-size:.88rem;min-width:480px}
table.cmp th{text-align:left;padding:6px 10px;font-size:.78rem;color:var(--muted);border-bottom:2px solid var(--line);white-space:nowrap}
table.cmp th.me,table.cmp td.me{background:rgba(72,163,166,.08)}
table.cmp th.me{color:var(--teal);font-weight:700}
table.cmp td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.cmp td.rl{color:var(--muted);font-size:.8rem}
table.cmp tr:last-child td{border-bottom:none}

/* ── seller marketing calendar ── */
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mc-dow{text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--muted);padding:2px 0}
.mc-cell{min-height:52px;background:var(--paper);border-radius:8px;padding:4px 6px;display:flex;flex-direction:column;gap:2px}
.mc-cell.mc-empty{background:none}
.mc-cell.mc-has{background:#fff;border:1.5px solid var(--line);cursor:pointer}
.mc-cell.mc-has:hover{border-color:var(--teal-accent)}
.mc-cell.mc-today{outline:2px solid var(--green);outline-offset:-2px}
.mc-d{font-size:.72rem;font-weight:600;color:var(--muted)}
.mc-ic{font-size:.85rem;line-height:1.1;letter-spacing:1px}
.mc-list{margin-top:14px;display:flex;flex-direction:column}
.mc-ev{display:flex;gap:12px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--line)}
.mc-ev:last-child{border-bottom:none}
.mc-ev-ic{font-size:1.15rem;flex:0 0 26px;text-align:center}
.mc-ev .t{flex:1}
@media(max-width:560px){.mc-cell{min-height:42px}}

/* ── v2.1 Home + More ── */
.focus .nextlbl{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark);margin-bottom:4px}
.impdate{cursor:pointer;border-left:4px solid var(--green)}
.impdate .cddays{display:inline-block;margin-top:6px;background:#eef4ee;color:var(--green-dark);border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:700}
.handling h3{color:var(--teal)}
.handle-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.handle-row:last-child{border-bottom:none}
.handle-row .t{flex:1;font-size:.92rem}
.pill.hstat{background:#eef2f4;color:var(--teal);font-size:.72rem}
.more-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer}
.more-row:last-child{border-bottom:none}
.more-row:hover b{color:var(--teal-accent)}
.mr-ic{font-size:1.25rem;flex:0 0 30px;text-align:center}
.more-row .t{flex:1}
.mr-ch{color:var(--muted);font-size:1.3rem}

/* ── must/nice suggestion chips ── */
.lf-sug{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.lf-sug-chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:999px;padding:6px 8px 6px 13px;font-size:.83rem;font-weight:500}
.lf-sug-chip a{cursor:pointer;padding:1px 6px;border-radius:999px;font-size:.9rem;text-decoration:none}
.lf-sug-chip a:first-of-type{color:var(--green-dark)}
.lf-sug-chip a:last-of-type{color:var(--teal-accent)}
.lf-sug-chip a:hover{background:#fff}

/* ── v2.2 plan sections ── */
.nothing-card{border-left:4px solid var(--green);background:linear-gradient(120deg,rgba(106,186,90,.07),rgba(72,163,166,.05))}
.nothing-card b{color:var(--green-dark)}
details.plansec{margin:0 0 12px}
details.plansec summary{cursor:pointer;font-weight:600;color:var(--teal);padding:10px 14px;background:var(--card);
  border-radius:var(--rad);box-shadow:var(--shadow);list-style-position:inside}
details.plansec summary:hover{color:var(--teal-accent)}
details.plansec[open] summary{border-radius:var(--rad) var(--rad) 0 0}


/* ── first-time buyer: "Not sure what this means?" expanders ───────── */
.ftbx{margin-top:8px;border:1px solid var(--line);border-radius:9px;background:var(--paper);
  overflow:hidden}
.ftbx summary{cursor:pointer;padding:9px 12px;font-size:.83rem;font-weight:600;
  color:var(--teal-accent);list-style:none}
.ftbx summary::-webkit-details-marker{display:none}
.ftbx summary::after{content:"＋";float:right;font-weight:400;opacity:.65}
.ftbx[open] summary::after{content:"−"}
.ftbx[open] summary{border-bottom:1px solid var(--line)}
.ftbx .ftbrow{padding:10px 12px;border-bottom:1px solid var(--line)}
.ftbx .ftbrow:last-child{border-bottom:0}
.ftbx .ftbrow b{display:block;font-size:.79rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:3px}
.ftbx .ftbrow span{font-size:.88rem;line-height:1.5;color:var(--ink)}

/* our own office listings, pinned to the top of search */
.pill.feat{background:#fdf6e4;color:#96731d;font-weight:700}

/* ── seller intake + buyer wish list (shared form styling) ─────────── */
.intake-q{padding:16px 18px}
.intake-q h3{font-size:1.02rem;line-height:1.35;display:flex;gap:9px;align-items:baseline}
.intake-q .qn{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--green);
  color:#fff;font-size:.74rem;font-weight:700;display:inline-flex;align-items:center;
  justify-content:center;transform:translateY(-1px)}
.intake-q textarea,.intake-q input{width:100%}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip-b{border:1.5px solid var(--line);background:#fff;border-radius:50px;padding:7px 14px;
  font:inherit;font-size:.85rem;color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s}
.chip-b:hover{border-color:var(--green)}
.chip-b.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.sysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sysgrid .field{margin:0}
.renorow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.renorow input{flex:1;margin:0}
.renorow input[data-reno=year]{flex:0 0 90px}

/* wish-list suggestion chips are tap-to-add */
.intake-q .lf-sug{margin-top:9px}
.intake-q .lf-sug-chip{cursor:pointer;font-size:.78rem;padding:5px 11px;
  transition:border-color .12s,background .12s}
.intake-q .lf-sug-chip:hover{border-color:var(--green);background:#fff}
.intake-q .ob-chip{cursor:pointer}
.intake-q .chips{margin-top:2px}

/* ── card tools: note + compare ────────────────────────────────────── */
.cardtools{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line)}
.cardtools .lnk{background:none;border:0;padding:0;font:inherit;font-size:.8rem;
  font-weight:600;color:var(--teal-accent);cursor:pointer}
.cardtools .lnk:hover{text-decoration:underline}
.cardtools .cmp{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);
  cursor:pointer;margin-left:auto}
.cardtools .cmp input{width:auto;margin:0;cursor:pointer}

/* floating bar once anything is ticked for comparison */
#cmpbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--navh,64px) + 14px);
  z-index:60;display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:50px;
  background:var(--ink);color:#fff;box-shadow:0 6px 26px rgba(1,47,56,.3);font-size:.87rem;
  max-width:calc(100vw - 32px)}
#cmpbar b{color:var(--green)}
#cmpbar .lnk{background:none;border:0;color:#cfe0e2;font:inherit;font-size:.83rem;cursor:pointer}
#cmpbar .lnk:hover{color:#fff;text-decoration:underline}

/* the comparison table */
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:12px;background:#fff}
.cmptable{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem}
.cmptable th,.cmptable td{padding:10px 13px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.cmptable thead th{position:sticky;top:0;background:#fff;z-index:1;min-width:170px;
  border-bottom:2px solid var(--line)}
.cmptable tbody th{font-weight:600;color:var(--muted);white-space:nowrap;background:var(--paper);
  position:sticky;left:0;z-index:1}
.cmptable tbody tr:last-child th,.cmptable tbody tr:last-child td{border-bottom:0}
.cmpph{display:block;height:88px;border-radius:8px;background:#eee center/cover no-repeat;
  margin-bottom:7px}
.cmpnote{white-space:pre-wrap;max-width:230px;line-height:1.45}
.cmptable .lnk{background:none;border:0;padding:0;font:inherit;font-size:.78rem;
  font-weight:600;color:var(--teal-accent);cursor:pointer}


/* ── welcome video card (Home) ─────────────────────────────────────── */
/* small on purpose — a full-width player dominated the Home screen */
.welcome-row{display:flex;gap:14px;align-items:flex-start;position:relative;padding-right:34px}
.wthumb{flex:0 0 72px;height:128px;padding:0;border:0;border-radius:10px;cursor:pointer;
  position:relative;background:#012F38 url('/assets/video/calgary-listings-welcome-poster.jpg')
  center/cover no-repeat}
.wthumb::after{content:"\25B6";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:1.15rem;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.wthumb:hover::after{transform:scale(1.12)}
.wclose{position:absolute;top:9px;right:11px;padding:4px;background:none;border:0;
  font-size:.9rem;line-height:1;color:var(--lt);cursor:pointer}
.wclose:hover{color:var(--ink)}

/* ── inline video blocks ───────────────────────────────────────────── */
.vid-ratio{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:#000}
.vid-ratio iframe,.vid-ratio video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-thumb{display:block;width:100%;border-radius:10px}
/* stage videos are shot vertical (1080x1920) — cap the height so a portrait
   clip doesn't tower over the rest of the card. Landscape hits the width
   limit first and is unaffected. */
.vid-thumb video{display:block;max-height:440px;max-width:100%;width:auto;
  margin:0 auto;border-radius:10px;background:#000}

/* ── photo marquee on listing cards ────────────────────────────────── */
@keyframes phscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ph-marquee img{height:100%;width:auto;border-radius:6px;flex:0 0 auto}

/* ── booking add-ons + generic form row ────────────────────────────── */
.bk-addon{width:auto;margin:0;cursor:pointer}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.row>*{flex:1;min-width:0}