:root{
  --paper:#F6F8F7;
  --card:#FFFFFF;
  --ink:#152420;
  --ink-2:#4A5B55;
  --ink-3:#7C8C86;
  --line:#DCE4E0;
  --line-2:#EDF1EF;
  --ok:#2F6B4F;
  --ok-bg:#E7F1EB;
  --warn:#B26A00;
  --warn-bg:#FBF0DE;
  --crit:#B3261E;
  --crit-bg:#FBE9E7;
  --util:#1F5B6E;
  --util-bg:#E6EFF2;
  --r:14px;
  --shadow:0 1px 2px rgba(21,36,32,.05), 0 6px 20px rgba(21,36,32,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer}

.shell{display:flex;min-height:100vh}
#nav-root{display:contents}

.rail{
  width:230px;flex:0 0 230px;
  background:var(--card);
  border-right:1px solid var(--line);
  padding:24px 16px;
  display:flex;flex-direction:column;gap:24px;
  position:sticky;top:0;height:100vh;
}
/* Brand block: logo + company name only. Hairline divider below is the
   only separator between "who we are" and "which house this is" --
   the property block (below) is deliberately NOT inside .brand, so it
   never reads as part of the company's identity. */
.brand{display:flex;gap:11px;align-items:center;padding:0 8px 18px;border-bottom:1px solid var(--line-2)}
.brand-logo{flex:0 0 30px;display:block}
.brand-name{font-size:15px;font-weight:700;line-height:1.25}

/* Property block (rail). Three states, rendered by PropertySwitcher in
   shell.js:
   - single home: a plain, non-interactive <div class="prop"> -- no
     border, no chevron, structurally incapable of looking tappable.
   - 2+ homes, closed: a <button class="prop prop-switchable"> -- same
     shape plus a hairline border, soft fill and chevron, so it reads
     as a control without becoming a form field. min-height enforces
     the 48px tap target regardless of content length.
   - 2+ homes, open: adds .prop-menu below the button, one .prop-mi row
     per home, address first and city second, with a checkmark (never
     colour alone) on the current one via .prop-tick. */
.prop{
  width:100%;border:0;background:none;text-align:left;
  padding:14px 10px;border-radius:10px;margin-top:12px;
  display:flex;gap:11px;align-items:center;min-height:48px;
}
.prop-ic{flex:0 0 20px;color:var(--ink-3);display:grid;place-items:center}
.prop-tx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.prop-ad{display:block;font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prop-ct{display:block;font-size:13px;color:var(--ink-3);margin-top:1px}
.prop-switchable{cursor:pointer;border:1.5px solid var(--line);background:#FCFDFD}
.prop-switchable:hover{border-color:var(--util);background:var(--util-bg)}
.prop-chev{flex:0 0 16px;color:var(--ink-3);display:grid;place-items:center}

.prop-menu{margin-top:7px;border:1px solid var(--line);border-radius:11px;background:var(--card);box-shadow:0 6px 24px rgba(21,36,32,.12);overflow:hidden}
.prop-mi{display:flex;gap:10px;align-items:center;padding:13px 12px;min-height:48px;border-bottom:1px solid var(--line-2);cursor:pointer}
.prop-mi:last-child{border-bottom:0}
.prop-mi:hover{background:var(--line-2)}
.prop-mi.on{background:var(--util-bg)}
.prop-tick{flex:0 0 16px;color:var(--util);display:grid;place-items:center}

nav{display:flex;flex-direction:column;gap:3px}
.navitem{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border:0;background:none;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--ink-2);text-align:left;width:100%;
  text-decoration:none;
}
.navitem:hover{background:var(--line-2)}
.navitem.current{background:var(--util-bg);color:var(--util)}
.navitem svg{flex:0 0 18px;width:18px;height:18px;stroke-width:1.9}

.railfoot{margin-top:auto;padding:0 8px;border-top:1px solid var(--line-2);padding-top:14px}
.account-chip{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.account-avatar{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--util);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.account-info{min-width:0;display:flex;flex-direction:column}
.account-label{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.account-info b{font-size:13.5px;color:var(--ink);font-weight:600;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railfoot a{display:inline-block;font-size:13px;color:var(--util);font-weight:600;text-decoration:none;cursor:pointer}
.railfoot a:hover{text-decoration:underline}

.callus{display:block;font-size:13px;color:var(--ink-3);margin-bottom:12px}
.callus b{display:block;font-size:16px;color:var(--util);font-weight:700;margin-top:2px}

/* Mobile-only "Questions? Call us" footer, appended at the end of each
   page's own content by shell.js -- hidden on desktop (the rail already
   has it), shown once the rail is replaced by the bottom tab bar. */
.mobile-callfoot{display:none}

/* Mobile-only property block, prepended at the START of each page's
   own content -- same hidden-on-desktop pattern as .mobile-callfoot
   above (the rail's own #rail-property covers desktop). Renders the
   same PropertySwitcher component, so it collapses to plain
   non-interactive text for a single-home account here too, and to a
   real switcher for a multi-home one -- see shell.js. */
.mobile-property{display:none}
.mobile-property .prop{margin-top:0}

main{flex:1;min-width:0;padding:28px 32px 90px;max-width:1180px}

h1{font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 22px}
h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:30px 0 12px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}

.tabbar{display:none}
@media(max-width:760px){
  .shell{flex-direction:column}
  .rail{display:none}
  main{padding:18px 14px 100px;max-width:none}
  .mobile-callfoot{display:block;margin-top:24px;padding-top:16px;border-top:1px solid var(--line-2)}
  .mobile-property:has(.prop){display:block;margin-bottom:16px}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:20;
  }
  .tabbar a{
    flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 2px;font-size:11px;font-weight:600;color:var(--ink-3);text-decoration:none;
  }
  .tabbar a.current{color:var(--util)}
  .tabbar svg{width:21px;height:21px;stroke-width:1.9}
}