/* Site Record - stable top navigation and cross-screen rhythm */

/* Keep the Jobs / Photos / Sync switcher in one physical position on every
   main app surface. The existing class name is retained so no working JS
   navigation logic needs to change. */
.app-shell:has(.bottom-nav){
  padding-top:max(104px,calc(env(safe-area-inset-top) + 104px));
}

.app-shell:has(.bottom-nav) .bottom-nav{
  position:fixed;
  top:max(12px,calc(env(safe-area-inset-top) + 8px));
  bottom:auto;
  left:50%;
  transform:translateX(-50%);
  z-index:120;
  width:min(calc(100% - 32px),776px);
  margin:0;
  border-radius:20px;
  box-shadow:0 10px 28px rgba(3,29,31,.18);
}

.app-shell:has(.bottom-nav) .bottom-nav button{
  min-height:48px;
  font-size:12px;
  letter-spacing:.01em;
}

/* With the switcher no longer covering the bottom edge, long photo/document
   screens can use the full viewport and the final row stays unobstructed. */
.app-shell:has(.bottom-nav) .photo-grid,
.app-shell:has(.bottom-nav) .document-list{
  padding-bottom:8px;
}

/* Give every tabbed screen the same header cadence underneath the fixed nav. */
.app-shell:has(.bottom-nav) > .topbar{
  margin-top:0;
  margin-bottom:26px;
  align-items:flex-start;
}

.app-shell:has(.bottom-nav) > .topbar:not(.dashboard-topbar) h1{
  margin:6px 0 4px;
  font-size:clamp(30px,7vw,40px);
  line-height:1.04;
}

.app-shell:has(.bottom-nav) > .topbar:not(.dashboard-topbar) .muted{
  font-size:14px;
}

.app-shell:has(.bottom-nav) > .topbar .back-button{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  margin-bottom:5px;
}

/* The parent brand remains the hero on My Jobs, but now sits in the same
   content lane as every other page rather than competing with navigation. */
.app-shell:has(.bottom-nav) .dashboard-topbar{
  padding-top:2px;
}

/* Keep secondary screen controls visually aligned with the new top structure. */
.app-shell:has(.bottom-nav) .status-card:first-of-type{
  margin-top:0;
}

@media(max-width:420px){
  .app-shell:has(.bottom-nav){
    padding-top:max(96px,calc(env(safe-area-inset-top) + 96px));
  }
  .app-shell:has(.bottom-nav) .bottom-nav{
    top:max(9px,calc(env(safe-area-inset-top) + 6px));
    width:calc(100% - 24px);
    padding:5px;
    border-radius:18px;
  }
  .app-shell:has(.bottom-nav) .bottom-nav button{
    min-height:46px;
  }
}

@media(min-width:700px){
  .app-shell:has(.bottom-nav){
    padding-top:max(108px,calc(env(safe-area-inset-top) + 108px));
  }
}