/* Atlas theme modes + cross-page typography utilities */

body{
  background:
    radial-gradient(1200px 640px at 14% 12%,rgba(68,148,255,.14),transparent 56%),
    radial-gradient(960px 580px at 88% 18%,rgba(91,237,214,.1),transparent 54%),
    linear-gradient(180deg,#040814 0%,#091224 48%,#091424 100%);
  color:var(--atlas-text);
}

/* Keep toolbar gutters aligned with primary page gutters */
.header .container{
  max-width:1340px;
  padding-inline:24px;
}

/* Typography utilities for consistent hierarchy */
.display-xl{
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:48px;
  font-weight:400;
  letter-spacing:-0.03em;
  line-height:1.1;
}
.h1{
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:32px;
  font-weight:400;
  letter-spacing:-0.02em;
}
.h2{
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:24px;
  font-weight:400;
  letter-spacing:-0.02em;
}
.h3{
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;
  font-weight:400;
}
.body{
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
}
.nav{
  font-size:15px;
  font-weight:400;
}
.button-text{
  font-size:14px;
  font-weight:600;
  letter-spacing:0.01em;
}
.label{
  font-size:13px;
  font-weight:400;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* Global typography contract: toolbars/title bars = Lato, body = Open Sans */
body,
input,
textarea,
select,
button{
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

h1,
h2,
h3,
.display-xl,
.h1,
.h2,
.h3,
.page-title,
.section-title,
.hero-title,
.headline,
.title-bar,
.title-pill{
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-weight:400 !important;
}

.header,
.header *,
.nav,
.nav *,
.menu-panel,
.menu-panel *,
.profile-panel,
.profile-panel *,
.dd-menu,
.dd-menu *,
.toolbar,
.toolbar *{
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-weight:400 !important;
}

/* Light mode (warm, calm) */
:root[data-theme="light"] body{
  background:
    radial-gradient(920px 540px at 18% 10%,rgba(75,147,199,.08),transparent 56%),
    radial-gradient(880px 520px at 84% 14%,rgba(47,143,140,.07),transparent 54%),
    linear-gradient(180deg,#e9ece6 0%,#ece8df 52%,#e4e1d8 100%);
  color:var(--atlas-text);
}
:root[data-theme="light"] .header{
  background:rgba(236,232,223,.9);
  border-bottom-color:rgba(17,24,39,.1);
}
:root[data-theme="light"] .menu-panel,
:root[data-theme="light"] .profile-panel,
:root[data-theme="light"] .dd-menu,
:root[data-theme="light"] .command-palette-panel,
:root[data-theme="light"] .application-drawer__panel{
  background:rgba(247,244,238,.96);
  border-color:rgba(43,60,82,.16);
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .surface-panel,
:root[data-theme="light"] .form-card,
:root[data-theme="light"] .fieldset-card,
:root[data-theme="light"] .application-card,
:root[data-theme="light"] .application-lane,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .stat-card{
  background:var(--atlas-surface-elevated);
  border-color:var(--atlas-border-default);
}
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select{
  color:#223144;
  background:rgba(34,49,68,.03);
  border-color:rgba(34,49,68,.14);
}
:root[data-theme="light"] .pill,
:root[data-theme="light"] .ghost-btn,
:root[data-theme="light"] .secondary-btn,
:root[data-theme="light"] .badge{
  color:#223144;
  border-color:rgba(17,24,39,.2);
}
:root[data-theme="light"] .primary-btn{
  color:#fff;
}
:root[data-theme="light"] .page-kicker{
  color:#5a6876;
  background:rgba(15,23,42,.05);
  border-color:rgba(15,23,42,.14);
}

/* Mobile toolbar polish */
@media (max-width: 1200px){
  .header .container{
    padding-inline:18px;
  }
  .nav{
    grid-template-columns:auto 1fr auto;
    gap:10px;
  }
  .nav .nav-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .brand{
    max-width:62vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .menu-panel{
    right:0;
    left:auto;
  }
}
@media (max-width: 760px){
  .header .container{
    padding-inline:16px;
  }
  .nav{
    grid-template-columns:auto 1fr auto;
    gap:8px;
    height:72px;
  }
  .nav-right{
    justify-content:flex-end;
    gap:8px;
  }
  .brand{
    justify-self:center;
    margin:0 auto;
    max-width:56vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:18px;
    padding:10px 12px;
  }
  .listings-page .filter-grid{
    grid-template-columns:1fr;
  }
  .listings-page .page-actions{
    display:grid;
    gap:10px;
    width:100%;
  }
  .listings-page .page-actions > *{
    width:100%;
  }
  .listings-page #saveSearchForm{
    display:grid !important;
    gap:8px;
    width:100%;
  }
  .listings-page #saveSearchForm input[name="name"]{
    max-width:none !important;
  }
  .saved-searches-page .saved-search-head{
    display:grid;
    gap:8px;
  }
  .saved-searches-page .saved-search-actions{
    display:grid;
    gap:8px;
  }
  .saved-searches-page .saved-search-actions > *{
    width:100%;
  }
  .manager-dashboard-page .hero-actions,
  .property-manager-dashboard-page .hero-actions,
  .landlord-dashboard-page .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .manager-dashboard-page .hero-actions > *,
  .property-manager-dashboard-page .hero-actions > *,
  .landlord-dashboard-page .hero-actions > *{
    width:100%;
  }
  .manager-dashboard-page .tile-grid,
  .property-manager-dashboard-page .tile-grid,
  .landlord-dashboard-page .tile-grid{
    grid-template-columns:1fr;
  }
  .manager-dashboard-page .ops-shell,
  .property-manager-dashboard-page .ops-shell,
  .landlord-dashboard-page .ops-shell{
    grid-template-columns:1fr;
    gap:14px;
  }
  .manager-dashboard-page .ops-sidebar,
  .property-manager-dashboard-page .ops-sidebar,
  .landlord-dashboard-page .ops-sidebar{
    order:2;
  }
}


/* Design 1 (Airbnb/Linear-inspired): editorial heading + flat action chrome */
:root{
  --atlas-font-body:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --atlas-font-display:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
}

html,body{
  overflow-x:hidden;
}

body,
button,
input,
select,
textarea{
  font-family:var(--atlas-font-body) !important;
}

h1,h2,h3,h4,h5,h6,
.page-title h1,
.page-copy h1,
.public-header h2,
.dash-header h2,
.dash-top h2,
.door-heading,
.brand,
.page-kicker{
  font-family:var(--atlas-font-display) !important;
  font-weight:400 !important;
  letter-spacing:-0.012em;
}

/* Toolbar typography + properties-only nav state */
.header .nav-left .pill,
.header .nav-right .pill,
.profile-btn,
.dd-trigger{
  font-family:var(--atlas-font-display) !important;
  font-weight:400 !important;
}

.menu-panel .menu-item,
.menu-panel .btn-link,
.profile-panel .dd-item,
.profile-panel .btn-link,
.nav-trigger{
  font-family:var(--atlas-font-display) !important;
  font-weight:400 !important;
}

p,
li,
td,
th,
label,
.muted,
.panel-copy,
.field-help,
.notice{
  font-family:var(--atlas-font-body) !important;
}

.is-lifestyle-shell .nav-properties-only{
  display:none !important;
}

/* Flat nav words with press impression instead of bubble chrome */
.header .nav-left .pill,
.header .nav-right .pill,
.menu-panel .menu-item,
.menu-panel .btn-link,
.profile-panel .dd-item,
.profile-panel .btn-link{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-decoration:none;
}

.header .nav-left .pill,
.header .nav-right .pill{
  padding:10px 6px;
  min-height:40px;
  color:var(--atlas-text);
  font-weight:400;
}

.header .nav-left .pill:hover,
.header .nav-left .pill.is-active,
.header .nav-right .pill:hover,
.menu-panel .menu-item:hover,
.menu-panel .btn-link:hover,
.profile-panel .dd-item:hover,
.profile-panel .btn-link:hover,
.menu-panel .menu-item:focus-visible,
.menu-panel .btn-link:focus-visible,
.profile-panel .dd-item:focus-visible,
.profile-panel .btn-link:focus-visible{
  background:rgba(122,198,255,.08);
  border-radius:9px;
  color:rgba(228,247,255,.98);
  text-shadow:0 0 14px rgba(123,197,255,.22);
}

.header .nav-left .pill:active,
.header .nav-right .pill:active,
.menu-panel .menu-item:active,
.menu-panel .btn-link:active,
.profile-panel .dd-item:active,
.profile-panel .btn-link:active{
  transform:translateY(1px);
  text-shadow:none;
}


.panel-copy a,
.muted a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding-inline:4px;
}
/* remove oversized bubble feel while keeping major CTA buttons clear */
.ghost-btn,
.secondary-btn{
  border-radius:10px;
  background:rgba(120,188,232,.08);
  border:1px solid rgba(120,188,232,.24);
  box-shadow:none;
}

.ghost-btn:hover,
.secondary-btn:hover{
  background:rgba(120,188,232,.14);
  border-color:rgba(145,212,252,.34);
}

/* mobile layout safety + centered Atlas + mobile profile access */
@media (max-width: 980px){
  .header .container,
  .container,
  .public-inner,
  .page-shell,
  .surface-panel,
  .section-stack,
  .ops-shell,
  .dashboard-grid{
    min-width:0;
    max-width:100%;
  }

  .header .nav{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-width:0;
  }

  .header .brand{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    max-width:58vw;
    text-align:center;
    z-index:1;
  }

  .header .nav-right{
    margin-left:auto;
    min-width:0;
    z-index:2;
  }

  .header .nav-actions{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .header .nav-trigger{
    display:none !important;
  }

  .header .profile-panel,
  .header .dd-menu{
    right:0;
    left:auto;
    max-height:calc(100dvh - 88px);
    overflow-y:auto;
  }
}


@media (max-width: 700px){
  .atlas-map-copy{
    top:12px;
    left:12px;
    width:min(252px,calc(100% - 24px));
    padding:12px 13px;
    gap:8px;
    border-radius:18px;
  }
  .atlas-map-copy-kicker{
    font-size:clamp(18px,7vw,30px);
    line-height:1.02;
  }
  .atlas-map-copy-text{
    font-size:13px;
    line-height:1.35;
    max-width:24ch;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .atlas-map-copy-actions{
    gap:8px;
  }
  .atlas-map-copy-action{
    width:100%;
    min-width:0;
  }
}

@media (max-width: 700px) and (max-height: 780px){
  .atlas-map-copy-text{
    -webkit-line-clamp:2;
  }
}




/* Mobile nav override: use a single hamburger panel to avoid crowded toolbar controls. */
@media (max-width: 980px){
  .nav .nav-actions{
    display:none !important;
  }
  .menu-wrap,
  #hamburgerBtn,
  .hamburger{
    display:inline-flex !important;
  }
  #hamburgerPanel{
    display:none !important;
  }
  #hamburgerPanel.open{
    display:block !important;
  }
}

/* Reorderable dropdown affordance */
.profile-panel .dd-item[draggable="true"],
.dd-menu .dd-item[draggable="true"],
.menu-panel .menu-item[draggable="true"]{
  cursor:grab;
}
.profile-panel .dd-item.is-dragging,
.dd-menu .dd-item.is-dragging,
.menu-panel .menu-item.is-dragging{
  opacity:.55;
}

/* Global logo pin (top-left across pages) */
.header{
  position:sticky;
}

.header .container{
  position:relative;
  padding-left:24px;
}

.header .nav{
  min-height:72px;
}

.atlas-logo-link{
  display:none !important;
}
.header .nav-left .atlas-logo-link,
.header .nav-left .atlas-center-logo-link{
  display:none !important;
}
.header .nav-left img[alt="Atlas LMC"]{
  display:none !important;
}

.atlas-logo-image{
  display:block;
  width:46px;
  height:46px;
  object-fit:contain;
}

@media (max-width: 980px){
  .header .container{
    padding-left:12px;
  }
}

/* About/contact toolbar cleanup */
.about-page .header .nav-left.desktop-only,
.contact-page .header .nav-left.desktop-only{
  display:none !important;
}

/* Home hero heading alignment + clipping guard */
.home-entry-page .door-scene--portal{
  padding-top:56px;
}

.home-entry-page .door-heading{
  margin:0;
  padding-top:.16em;
  line-height:1.08;
  display:grid;
  justify-items:center;
  gap:0;
  text-align:center;
  overflow:visible;
}

.home-entry-page .door-heading .door-heading-line{
  display:block;
  width:100%;
  text-align:center;
}

/* Light mode readability for pill/button bubbles */
:root[data-theme="light"] .pill,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .ghost-btn,
:root[data-theme="light"] .secondary-btn,
:root[data-theme="light"] .menu-panel .menu-item,
:root[data-theme="light"] .profile-panel .dd-item,
:root[data-theme="light"] .dd-menu .dd-item{
  color:#102235 !important;
  border-color:#c6d4e4 !important;
  background:#f4f8fd !important;
}

:root[data-theme="light"] .menu-panel .menu-item:hover,
:root[data-theme="light"] .profile-panel .dd-item:hover,
:root[data-theme="light"] .dd-menu .dd-item:hover,
:root[data-theme="light"] .pill:hover,
:root[data-theme="light"] .ghost-btn:hover,
:root[data-theme="light"] .secondary-btn:hover{
  color:#0b1f30 !important;
  background:#e9f1fb !important;
}

:root[data-theme="light"] .menu-panel,
:root[data-theme="light"] .profile-panel,
:root[data-theme="light"] .dd-menu{
  background:#f7f4ee !important;
  border-color:#c7d2df !important;
  color:#163046 !important;
}

:root[data-theme="light"] .table td,
:root[data-theme="light"] .table th,
:root[data-theme="light"] .muted,
:root[data-theme="light"] label,
:root[data-theme="light"] p,
:root[data-theme="light"] li{
  color:#12283a !important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  color:#163046 !important;
  background:#f5f1ea !important;
  border-color:#c7d2df !important;
}

:root[data-theme="light"] ::placeholder{
  color:#4f6a80 !important;
  opacity:1;
}

/* Final presentation lock: light-mode bubble/chip readability */
:root[data-theme="light"] .pill,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .menu-item,
:root[data-theme="light"] .dd-item,
:root[data-theme="light"] .application-tab,
:root[data-theme="light"] .application-status-pill,
:root[data-theme="light"] .lifestyle-chip,
:root[data-theme="light"] .dashboard-chip,
:root[data-theme="light"] .island-chip,
:root[data-theme="light"] .services-category-chip,
:root[data-theme="light"] .listing-pick-tag,
:root[data-theme="light"] .listing-mood-tag,
:root[data-theme="light"] .contractor-directory-tag,
:root[data-theme="light"] .atlas-world-chip{
  color:#163046 !important;
  background:#eef2f5 !important;
  border-color:#c5d0dc !important;
  text-shadow:none !important;
  box-shadow:none !important;
}

:root[data-theme="light"] .pill:hover,
:root[data-theme="light"] .badge:hover,
:root[data-theme="light"] .menu-item:hover,
:root[data-theme="light"] .dd-item:hover,
:root[data-theme="light"] .application-tab:hover,
:root[data-theme="light"] .lifestyle-chip:hover,
:root[data-theme="light"] .island-chip:hover,
:root[data-theme="light"] .services-category-chip:hover{
  color:#11293d !important;
  background:#e3e9ef !important;
  border-color:#b7c4d2 !important;
}

:root[data-theme="light"] .application-tab.is-active,
:root[data-theme="light"] .island-chip.is-active,
:root[data-theme="light"] .services-category-chip.is-active{
  color:#ffffff !important;
  background:linear-gradient(140deg,#0c67b4,#0a8ac7) !important;
  border-color:#0a6cae !important;
}

:root[data-theme="light"] .atlas-map-copy-action.primary-btn,
:root[data-theme="light"] .atlas-map-copy-action{
  color:#ffffff !important;
  background:linear-gradient(140deg,#0c67b4,#0a8ac7) !important;
  border-color:#0a6cae !important;
}

:root[data-theme="light"] .experience-page .atlas-map-copy .primary-btn,
:root[data-theme="light"] .experience-page .atlas-map-copy .atlas-map-copy-action.primary-btn{
  color:#ffffff !important;
  background:linear-gradient(140deg,#0c67b4,#0a8ac7) !important;
  border-color:#0a6cae !important;
  text-shadow:none !important;
}

:root[data-theme="light"] .page-kicker{
  color:#2f5169 !important;
  background:#eef4fb !important;
  border-color:#cfdaea !important;
}

/* Services request scope controls */
.services-request-form [data-service-property-wrap][hidden],
.services-request-form [data-service-external-note][hidden]{
  display:none !important;
}
.services-request-scope-note{
  margin-top:-2px;
}

/* Desktop toolbar spacing normalization */
@media (min-width: 981px){
  .header .container{
    max-width:none !important;
    width:100%;
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .header .nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:18px;
    align-items:center;
  }

  .header .nav-left.desktop-only{
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    margin-left:0 !important;
    flex-wrap:nowrap;
    min-width:0;
  }

  .header .nav-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:nowrap;
    min-width:0;
  }

  .header .nav-actions{
    display:flex;
    align-items:center;
    gap:16px;
    white-space:nowrap;
  }
}

/* Toolbar hard lock: square edges + centered Atlas logo on every page */
.header{
  border-radius:0 !important;
}

.header .container{
  border-radius:0 !important;
  width:100% !important;
  max-width:none !important;
}

.header .nav{
  border-radius:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center;
  gap:16px;
}

.atlas-center-logo-link{
  grid-column:2;
  justify-self:center;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(122,198,255,.2);
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.atlas-center-logo-link:hover{
  transform:translateY(-1px);
  border-color:rgba(122,198,255,.34);
  box-shadow:0 12px 22px rgba(0,0,0,.24);
}

.atlas-center-logo-image{
  width:40px;
  height:40px;
  object-fit:contain;
  display:block;
}

@media (max-width: 980px){
  .header .container{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .atlas-center-logo-link{
    width:46px;
    height:46px;
    border-radius:9px;
  }

  .atlas-center-logo-image{
    width:34px;
    height:34px;
  }
}

/* Shared dashboard onboarding/readiness widget */
.onboarding-widget{
  margin:12px 0;
}
.onboarding-widget__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.onboarding-widget__head h3{
  margin:0;
}
.onboarding-widget__meters{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.onboarding-meter{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(130,180,255,.18);
  border-radius:12px;
  padding:10px 12px;
}
.onboarding-meter__label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:13px;
  margin-bottom:8px;
}
.onboarding-meter__track{
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}
.onboarding-meter__track > span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#6fbfff,#38d8c6);
}
.onboarding-widget__role-line{
  margin-top:10px;
  color:var(--text-muted);
  font-size:13px;
}
.onboarding-next-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.onboarding-next-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(130,180,255,.22);
  background:rgba(255,255,255,.03);
  font-weight:700;
  font-size:13px;
}
.onboarding-next-link:hover{
  border-color:rgba(130,180,255,.38);
  background:rgba(110,188,255,.08);
}
.onboarding-next-empty{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:10px;
  font-size:13px;
}
.onboarding-next-empty span{
  color:var(--text-muted);
}
.onboarding-widget__foot{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width: 980px){
  .onboarding-widget__meters{
    grid-template-columns:1fr;
  }
}
