/* Building Support resident app: the home menu. The rest of the look comes from look-20261114.css. */
.app{max-width:none}
.topbar .round+.round{margin-left:.4em}
.banner .change{display:inline-block}
.menu{display:grid;gap:.7em;grid-template-columns:1fr}
@container (min-width:34em){.menu{grid-template-columns:1fr 1fr}}
.tile{display:flex;align-items:center;gap:.9em;width:100%;text-align:left;border:0;cursor:pointer;text-decoration:none;color:var(--ink);
 background:#fff;border-radius:1.2em;padding:1em 1.1em;box-shadow:0 1px 2px rgba(16,40,64,.05),0 10px 26px -16px rgba(16,40,64,.22)}
.tile:hover{background:#f7fbff}
.tile .ic{width:2.8em;height:2.8em;border-radius:.9em;display:grid;place-items:center;color:#fff;flex:none;background:linear-gradient(135deg,#0a6fc2,#0b4f8c)}
.tile .ic svg{width:1.5em;height:1.5em}
.tile b{font-family:var(--display);display:block;font-size:1.02em;line-height:1.2}
.tile small{display:block;color:var(--muted);font-size:.83em;margin-top:.15em}
.tile .go{margin-left:auto;color:#94a3b8;width:1.1em;height:1.1em;flex:none}
.tile .tag{display:inline-block;margin-left:.4em;font-family:var(--body);font-size:.7em;font-weight:700;background:#fff1dc;color:#8a4b08;border-radius:1em;padding:.1em .55em;vertical-align:middle}
.tile.test .ic{background:linear-gradient(135deg,#d08a1c,#a8650b)}
.helpcard{display:flex;align-items:center;gap:.8em}
.helpcard p{margin:0;font-size:.9em;color:var(--muted)}
.helpcard p b{color:var(--ink)}
.soon{text-align:center;padding:2em 1em}
.soon .badge{margin:0 auto 1em}

/* Report a Building Issue */
.urgent{display:flex;gap:.7em;align-items:flex-start;background:#fff6e8;border:1px solid #f3d6ac;color:#6d3c0c;border-radius:1em;padding:.8em 1em;font-size:.88em}
.urgent svg{width:1.2em;height:1.2em;flex:none;margin-top:.15em}
.urgent a{color:inherit;font-weight:700}
textarea.input{font-family:inherit;color:inherit;resize:vertical;min-height:6em;font-size:1em;line-height:1.45}
.photos{display:flex;flex-wrap:wrap;gap:.5em}
.ph{position:relative;width:5.2em;height:5.2em;border-radius:.8em;overflow:hidden;background:#eef2f6}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph button{position:absolute;top:.2em;right:.2em;width:1.6em;height:1.6em;border-radius:50%;border:0;background:rgba(10,20,30,.7);color:#fff;cursor:pointer;line-height:1}
.addph{width:5.2em;height:5.2em;border-radius:.8em;border:1.5px dashed #b8c4cf;background:#fff;color:var(--blue);font-weight:600;font-size:.8em;cursor:pointer}
.soon .tag{display:inline-block;margin-top:.5em;font-size:.75em;font-weight:700;background:#fff1dc;color:#8a4b08;border-radius:1em;padding:.15em .6em}
.soon .link{display:block;margin:.6em auto 0}

/* Main page (Nov 14 2026 redesign): building photo on top like the elevator page, one contact list, services below */
.contacts h3,.bsblock h3{font-size:1.15em;margin:0 0 .5em}
.pm{display:flex;gap:.85em;align-items:flex-start;padding:.2em 0 .8em}
.pm+.pm{border-top:1px solid var(--line);padding-top:.8em}
.av{width:3em;height:3em;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;background:linear-gradient(135deg,#0a6fc2,#0b4f8c);box-shadow:0 8px 18px -10px rgba(10,111,194,.8)}
.pmb{display:grid;gap:.05em;min-width:0}
.pmb b,.ah b{font-family:var(--display);font-size:1.1em;line-height:1.2}
.ctitle{color:var(--muted);font-size:.85em}
.plines{display:grid;gap:.1em;margin-top:.35em}
.cline{display:inline-flex;align-items:center;gap:.5em;color:var(--ink);text-decoration:none;font-weight:600;padding:.12em 0;width:fit-content;max-width:100%;overflow-wrap:anywhere}
.cline svg{width:1em;height:1em;color:var(--blue);flex:none}
.cline:hover{color:var(--blue)}
.ah{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2em .8em;border-top:1px solid var(--line);padding-top:.75em;margin-top:.1em}
.ahl{font-size:.72em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cnote{margin:.1em 0 0;font-size:.85em;color:var(--muted);line-height:1.45}
.e911{color:#b42318;font-weight:700;text-decoration:none;white-space:nowrap}
.contacts{gap:.7em}
.contacts h3{margin:0}
.bsblock{border-top:1px solid var(--line);padding-top:1.1em}
@container (min-width:720px){.home .banner + .page{margin-top:-7em}}
/* Logo: larger and with more room (Justin wants it easier to see without being blocky) */
.topbar img{height:2.1em}
/* "Building Support / Resident services" next to the logo, sized to match it */
.topbar .t{font-size:1.04em}
.topbar .t small{font-size:.8em}
@container (min-width:720px){.topbar{padding:.8em 2em}.topbar img{height:2.6em}.topbar .t{font-size:1.15em}}
@container (max-width:719px){.home .banner{height:11em}}

.uline{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}

/* Your Property Manager: a soft ClearCare-blue header band and a light blue wash, so the card stands out */
.card.contacts{padding:0;overflow:hidden;gap:0;background:linear-gradient(180deg,#f3f8fd 0%,#fff 55%);border:1px solid #d9e8f6}
.card.contacts h3{margin:0;padding:.75em 1.1em;color:#fff;font-size:1.02em;background:linear-gradient(135deg,#0a6fc2,#0b4f8c)}
.card.contacts>:not(h3){margin-left:1.1em;margin-right:1.1em}
.card.contacts .pm{padding-top:1em}
.card.contacts .cnote{padding:.6em 0 1em}
.card.contacts .ah{margin-top:0}
.app .card.contacts h3{color:#fff}
/* The management company: logo and name under the header band */
.card.contacts .co{display:flex;align-items:center;gap:.8em;padding:.9em 0 .7em;border-bottom:1px solid var(--line)}
.co img{height:3.2em;max-width:8em;object-fit:contain;flex:none}
.co span{font-family:var(--display);font-weight:700;font-size:.95em;color:var(--ink);line-height:1.2}
/* Welcome to … (like the lobby signs) */
.banner .welcome{display:block;font-size:.78em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.9;margin-bottom:.1em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
/* Manager row: name, title, company; the company logo on the right (Justin, Nov 14 2026) */
.pmb{flex:1}
.cco{font-size:.85em;font-weight:700;color:var(--blue-dark)}
.cologo{height:3.6em;max-width:6.5em;object-fit:contain;flex:none;align-self:flex-start;margin-left:.4em}
@container (max-width:420px){.cologo{height:2.8em;max-width:4.6em}}
/* Welcome to … bigger */
.banner .welcome{font-size:.85em}
.home .banner b{font-size:1.65em}
@container (min-width:720px){.home .banner b{font-size:2.3em}.banner .welcome{font-size:.95em}}
.pm{display:grid;grid-template-columns:auto 1fr auto;column-gap:.85em;align-items:start}
.pm .plines{grid-column:2/-1;margin-top:.3em}
@container (max-width:420px){.pm .plines{grid-column:1/-1;margin-top:.6em}}
/* After hours in the manager's contact lines */
.ahline{align-items:flex-start}
.ahline svg{margin-top:.25em}
.ahline span{display:grid;line-height:1.25}
.ahline small{font-size:.7em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.card.contacts .cnote{border-top:1px solid var(--line);padding-top:.7em}
/* Logo options */
.card.contacts h3{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.hlogo{background:#fff;border-radius:.5em;padding:.2em .35em;display:grid;place-items:center}
.hlogo .cologo{height:2em;max-width:5em;margin:0}
.av.logo{background:#fff;border:1px solid var(--line);box-shadow:none;overflow:hidden}
.av.logo .cologo{height:2.6em;max-width:2.6em;margin:0}
.logo-badge .av{width:3.4em;height:3.4em}
/* Company logo a bit bigger (Justin, Nov 14 2026) */
.cologo{height:4.6em;max-width:8em}
@container (max-width:420px){.cologo{height:4em;max-width:6em}}
.hlogo .cologo{height:2.6em;max-width:6.5em}
.av.logo .cologo{height:3em;max-width:3em}

/* Managed by / Your property manager is (Nov 14 2026): replaces the header band version */
.card.contacts.mb{padding:1.1em;gap:.8em;background:linear-gradient(180deg,#f3f8fd 0%,#fff 60%);border:1px solid #d9e8f6}
.card.contacts.mb>*{margin-left:0;margin-right:0}
.mb .kick{display:block;font-size:.72em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.mb .stmt{display:flex;align-items:center;gap:.85em}
.mb .stmt>div{display:grid;gap:.05em;min-width:0}
.mb .stmt b{font-family:var(--display);font-size:1.12em;line-height:1.2}
.mb .stmt b.big{font-size:1.2em}
.mb .co1{padding-bottom:.8em;border-bottom:1px solid var(--line)}
.mb .cologo{height:3.4em;max-width:5.5em;margin:0;flex:none}
.mb .av{width:3.4em;height:3.4em;flex:none}
.mb .plines{margin-top:.1em;padding-top:.7em;border-top:1px solid var(--line)}
.mb .lname{font-weight:700;font-size:.85em;color:var(--muted);margin-top:.3em}
.mb .cnote{border-top:1px solid var(--line);padding:.7em 0 0;margin:0}
.mb .two{display:grid;grid-template-columns:1fr 1fr;gap:.8em}
.mb .side{display:grid;justify-items:center;text-align:center;gap:.35em;background:#fff;border:1px solid var(--line);border-radius:1em;padding:.8em .6em}
.mb .side b{font-family:var(--display);font-size:1em;line-height:1.2}
.mb .side .ctitle{font-size:.78em}
.mb .side .cologo,.mb .side .av{height:3em;width:auto;max-width:5em}
.mb .side .av{width:3em}
.mb .sent{display:flex;align-items:center;gap:.9em}
.mb .sent p{margin:0;font-size:1.05em;line-height:1.45}
.mb .sent b{font-family:var(--display)}
/* Company logos the same visual size whatever their shape (Duka's wordmark was too big) */
.mb .cologo{width:4.6em;height:3em;max-width:none;object-fit:contain;object-position:center}
.mb .side .cologo{width:4.6em;height:2.8em}
/* After hours emergency manager: small header, number like the lines above, what it's for */
.ahblock{display:grid;gap:.1em;margin-top:.55em;padding-top:.55em;border-top:1px dashed var(--line)}
.ahhead{display:flex;align-items:center;gap:.45em;font-size:.74em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ahhead svg{width:1.25em;height:1.25em;color:var(--blue)}
.ahfor{margin:.25em 0 0;font-size:.8em;color:var(--muted);line-height:1.4}
/* Back to Home bar on every page but the main one */
.backbar{background:#fff;border-bottom:1px solid var(--line);padding:.35em .6em;position:relative;z-index:4}
.backbar button{display:inline-flex;align-items:center;gap:.25em;border:0;background:none;color:var(--blue);font-weight:700;font-size:.95em;cursor:pointer;padding:.35em .4em;border-radius:.6em}
.backbar button:hover{background:#eef4fb}
.backbar svg{width:1.2em;height:1.2em}
@container (min-width:720px){.backbar{padding:.35em 2em}}
/* Emergency line: no clock, red emergency star on the number */
.cline.em svg{color:#b42318}
/* Life-threatening emergency line: stands out, still inside the card */
.e911{display:flex!important;align-items:center;gap:.5em;white-space:normal!important;font-size:1.02em;font-weight:800;color:#b42318}
.e911 svg{width:1.3em;height:1.3em;flex:none}
/* "Your building is managed by", apart from the manager card */
.mgcenter{display:grid;justify-items:center;text-align:center;gap:.15em;padding:.2em 0 .1em}
.mgcenter .cologo{width:6em;height:3.6em;object-fit:contain;margin:0 0 .35em}
.mgcenter .kick,.mgstrip .kick{display:block;font-size:.72em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.mgcenter b,.mgstrip b{font-family:var(--display);font-size:1.25em;line-height:1.2;color:var(--ink)}
.mgstrip{display:flex;align-items:center;gap:.9em;background:#fff;border:1px solid var(--line);border-radius:1em;padding:.7em 1em}
.mgstrip .cologo{width:4.6em;height:3em;object-fit:contain;margin:0;flex:none}
.mghero{display:flex;align-items:center;gap:.55em;margin:.55em 0 .1em;font-size:.88em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.mghero img{height:2.2em;width:auto;max-width:4.5em;background:#fff;border-radius:.4em;padding:.15em .3em;object-fit:contain}
.mghero b{font-family:var(--display)}
.banner .mghero b{display:inline;font-size:1em!important;line-height:1.3;text-shadow:none}
.home .banner:has(.mghero){height:auto;min-height:11em;padding-top:1.4em}
@container (min-width:720px){.home .banner:has(.mghero){min-height:19em}}
.e911in{color:#b42318;font-weight:700;text-decoration:none}
/* Main page sections */
.sect{display:grid;gap:.5em;margin-top:.4em}
.sect+.sect{margin-top:1em}
.sect h4{margin:0;font-family:var(--display);font-size:.78em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Big tap buttons (intercom) */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.choice{border:1.5px solid var(--line);background:#fff;border-radius:1em;padding:1em .8em;min-height:3.6em;font-weight:700;font-size:.95em;color:var(--ink);cursor:pointer;text-align:center;line-height:1.25;box-shadow:0 1px 2px rgba(16,40,64,.05)}
.choice.on{border-color:var(--blue);background:#eaf3fc;color:var(--blue-dark);box-shadow:0 0 0 3px rgba(10,111,194,.14)}
.choices.two .choice{min-height:3em;padding:.7em}
/* Intercom request picker: three options to choose from */
.iclist{grid-template-columns:1fr!important}
.iclist .tile.sel{box-shadow:0 0 0 2px var(--blue),0 10px 26px -16px rgba(16,40,64,.22);background:#f4f9fe}
.iclist .go.ok{color:var(--blue);width:1.3em;height:1.3em}
.pills{display:flex;flex-wrap:wrap;gap:.5em}
.pill{border:1.5px solid var(--line);background:#fff;border-radius:2em;padding:.6em 1.05em;font-weight:600;font-size:.92em;color:var(--ink);cursor:pointer}
.pill.on{background:var(--blue);border-color:var(--blue);color:#fff}
.radios{padding:.3em 1.1em;gap:0}
.radio{display:flex;align-items:center;gap:.9em;width:100%;border:0;background:none;text-align:left;padding:.85em 0;cursor:pointer;color:var(--ink)}
.radio+.radio{border-top:1px solid var(--line)}
.radio b{display:block;font-family:var(--display);font-size:1em}
.radio small{display:block;color:var(--muted);font-size:.82em}
.radio .dot{width:1.35em;height:1.35em;border-radius:50%;border:2px solid #9fb2c1;flex:none;position:relative}
.radio.on .dot{border-color:var(--blue)}
.radio.on .dot::after{content:"";position:absolute;inset:.22em;border-radius:50%;background:var(--blue)}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#eef2f6;border-radius:.9em;padding:.25em;gap:.25em}
.seg button{border:0;background:none;border-radius:.7em;padding:.65em;font-weight:700;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,40,64,.15)}
/* Slimmer intercom pickers (Justin: small decision, keep it light) */
.radios.slim{padding:.15em 1em}
.radios.slim .radio{padding:.6em 0;gap:.7em;font-size:.95em;font-weight:600}
.radios.slim .dot{width:1.15em;height:1.15em}
.radios.slim .radio.on .dot::after{inset:.2em}
.seg.four{grid-template-columns:1fr 1fr}
.seg.four button{font-size:.88em;padding:.6em .4em;line-height:1.2}
.card.fields>.check{font-weight:600}
/* Intercom choices: small icon, light blue highlight when picked */
.radios.slim{padding:.35em;gap:.2em}
.radios.slim .radio{padding:.55em .65em;border-radius:.8em;border:1.5px solid transparent}
.radios.slim .radio+.radio{border-top:1.5px solid transparent}
.radios.slim .radio.on{background:#eaf3fc;border-color:var(--blue);color:var(--blue-dark)}
.radio .sym{width:1.7em;height:1.7em;border-radius:.5em;display:grid;place-items:center;background:#eef3f8;color:var(--blue);flex:none}
.radio .sym svg{width:1em;height:1em}
.radio.on .sym{background:var(--blue);color:#fff}
/* Intercom flow 5 */
.sub2{display:grid;gap:.6em;border-top:1px dashed var(--line);padding-top:.7em}
.subhead{display:flex;justify-content:space-between;align-items:center}
.onfile{margin:0;background:#fff6e8;border:1px solid #f3d6ac;color:#6d3c0c;border-radius:.8em;padding:.6em .8em;font-size:.88em}
.onfileok{display:flex;gap:.45em;align-items:center;margin:0;color:var(--good);font-size:.88em;font-weight:600}
.onfileok svg{width:1.1em;height:1.1em}
/* Intercom in steps */
.blk-h{font-family:var(--display);font-size:.95em}
.review{gap:0;padding:.4em 1.1em}
.review>div{display:flex;justify-content:space-between;gap:1em;padding:.55em 0;border-bottom:1px solid var(--line);font-size:.92em}
.review>div:last-child{border-bottom:0}
.review span{color:var(--muted)}
.review b{text-align:right}
/* Order a fob or remote */
.devs{padding:.4em 1.1em;gap:0}
.dev{display:flex;align-items:center;gap:.8em;padding:.7em 0;border-bottom:1px solid var(--line)}
.dev img{width:3em;height:3em;object-fit:contain;border-radius:.6em;background:#f4f6f9;flex:none}
.devic{width:3em;height:3em;border-radius:.6em;display:grid;place-items:center;background:#eef3f8;color:var(--blue);flex:none}
.devic svg{width:1.4em;height:1.4em}
.dev>div{flex:1;display:grid}
.dev b{font-family:var(--display);font-size:1em}
.dev small{color:var(--muted);font-size:.85em}
.dev .qty{width:5em;flex:none}
.dev .qty select{padding:.55em .8em}
.devtotal{display:flex;justify-content:space-between;padding:.75em 0 .4em;font-size:1.02em}
.devtotal b{font-family:var(--display)}
/* Photos and logos fade in once loaded, in space already kept for them */
.banner .bphoto{position:absolute;inset:0;background-size:cover;background-position:center;animation:bsfade .45s ease both}
.banner.shown::before{z-index:1}
.banner>div{z-index:2}
@keyframes bsfade{from{opacity:0}to{opacity:1}}
.cologo{opacity:0;transition:opacity .35s}
.cologo.in{opacity:1}
.banner .bphoto{z-index:0}
.banner .bphoto.still{animation:none}