/* On phone-sized inner pages, the page hero owns the status-bar area.
   The overview intentionally keeps its own logo/header treatment. */
@media (max-width:720px){
 html:has(body.field-mode:not(:has(.field-home))){
  
  
  background-position:center top!important;
  background-size:100% calc(env(safe-area-inset-top) + 240px)!important;
  background-repeat:no-repeat!important;
 }
 
 
 
 
 

 /* Keep each section's existing visual language and actions, while making its
    own title surface reach both edges and the top of the phone. */
 body.field-mode #content > .page-head{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .routine-hero{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .lead-room > .lead-hero{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .planning > .page-head{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .timehbu > .timehbu-hero{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .ren-page > .ren-hero{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .outdoor-page > .page-head{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .cl-page > .cl-hero{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .timeline-page > .page-head{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .work-calendar-page > .page-head{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }body.field-mode #content > .insights > .page-head{
  padding-top:calc(env(safe-area-inset-top) + 25px)!important;
  border-radius:0 0 16px 16px!important;
 }

 /* Team puts its tabs before the heading in the source. Show the heading first
    on mobile, followed by the same tabs and content. */
 body.field-mode #content:has(> .competence-tabs){display:flex;flex-direction:column}
 body.field-mode #content:has(> .competence-tabs) > .page-head{order:-1}

 /* These three pages have an additional inner gutter above the title. */
 body.field-mode #content:has(> .cl-page){padding-left:0!important;padding-right:0!important}body.field-mode #content:has(> .timeline-page){padding-left:0!important;padding-right:0!important}
 body.field-mode #content > .cl-page{padding-top:0!important;padding-left:15px!important;padding-right:15px!important}body.field-mode #content > .timeline-page{padding-top:0!important;padding-left:15px!important;padding-right:15px!important}
 body.field-mode #content > .cl-page > .cl-hero{margin-left:-15px!important;margin-right:-15px!important}body.field-mode #content > .timeline-page > .page-head{margin-left:-15px!important;margin-right:-15px!important}
 body.field-mode #content > .insights.analysis-workspace{padding-top:0!important}
 body.field-mode #content > .insights.analysis-workspace > .page-head{
  margin-left:-14px!important;margin-right:-14px!important;
  padding-left:20px!important;padding-right:20px!important;
  background:linear-gradient(108deg,#071019,#152a40 48%,#2b4157)!important;
  color:#fff!important;
 }
 body.field-mode #content > .insights.analysis-workspace > .page-head h1{
  color:#fff!important;-webkit-text-fill-color:#fff!important;
 }body.field-mode #content > .insights.analysis-workspace > .page-head p{
  color:#fff!important;-webkit-text-fill-color:#fff!important;
 }
 body.field-mode #content > .timeline-page > .page-head{
  padding-left:20px!important;padding-right:20px!important;
  background:linear-gradient(108deg,#071019,#152a40 48%,#2b4157)!important;
  color:#fff!important;
 }
 body.field-mode #content > .timeline-page > .page-head h1{color:#fff!important;-webkit-text-fill-color:#fff!important}body.field-mode #content > .timeline-page > .page-head p{color:#fff!important;-webkit-text-fill-color:#fff!important}
 body.field-mode #content > .timeline-page > .page-head .eyebrow{color:#f1cb77!important}

 body.field-mode #content > .cl-page > .cl-hero{
  background:linear-gradient(108deg,#071019,#152a40 48%,#2b4157)!important;
  border:0!important;
 }
 body.field-mode #content > .cl-page > .cl-hero h1{color:#fff!important;-webkit-text-fill-color:#fff!important}body.field-mode #content > .cl-page > .cl-hero p{color:#fff!important;-webkit-text-fill-color:#fff!important}
 body.field-mode #content > .cl-page > .cl-hero .cl-breadcrumb{color:#f1cb77!important}

 /* A failed data request must not restore the old mobile header. */
 
 body.field-mode #content:has(> .card > #insightRefresh) > .card{
  margin:0!important;padding:calc(env(safe-area-inset-top) + 25px) 20px 24px!important;
  border:0!important;border-radius:0 0 16px 16px!important;
  background:linear-gradient(108deg,#071019,#152a40 48%,#2b4157)!important;
  color:#fff!important;
 }
 body.field-mode #content:has(> .card > #insightRefresh) > .card h1{color:#fff!important}body.field-mode #content:has(> .card > #insightRefresh) > .card p{color:#fff!important}

 /* In a building, the facade photo is the title surface. The back action and
    notification sit on the photo without changing the property controls. */
 
 body.field-mode #content.pd-v2 > .back-link{
  position:absolute;z-index:4;top:calc(env(safe-area-inset-top) + 16px);left:15px;
  min-height:46px;margin:0!important;padding:0 12px!important;
  border:1px solid rgba(255,255,255,.55)!important;border-radius:10px!important;
  background:rgba(7,16,25,.6)!important;color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
 }
 body.field-mode #content.pd-v2 > .property-detail-top .property-cover{
  width:100%!important;margin:0!important;border-radius:0 0 16px 16px!important;
 }
 body.field-mode #content.pd-v2 > .property-detail-top .property-cover .building-photo{
  height:245px!important;min-height:245px!important;
 }body.field-mode #content.pd-v2 > .property-detail-top .property-cover .building-photo img{
  height:245px!important;min-height:245px!important;
 }
 body.field-mode #content.pd-v2 > .property-detail-top .property-cover::before{
  content:"";position:absolute;z-index:1;inset:0 0 auto;height:86px;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,16,25,.7),transparent);
 }
}

/* Shared solid status area on mobile inner pages; selected home stays unchanged. */
@media(max-width:720px){body.field-mode:not(:has(.field-home)) #content>.page-head{background:#101722!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}body.field-mode:not(:has(.field-home)) #content>.routine-hero{background:#101722!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}body.field-mode:not(:has(.field-home)) .cl-hero{background:#101722!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}