/* Four Color Comic v40.30.6 — centered two-row header + separated zoom control. */

/* Desktop: brand/account own the first row. Main workflow is centered on a full-width second row. */
.topinner{
  grid-template-columns:minmax(260px,1fr) minmax(0,1fr) minmax(260px,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:8px 18px!important;
  padding-top:10px!important;
  padding-bottom:8px!important;
}
.topinner>.brand{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:start!important;
}
.topinner>.cloud-user{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:end!important;
}
.topinner>.fcc-nav-row{
  grid-column:1/-1!important;
  grid-row:2!important;
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  border-top:1px solid rgba(255,255,255,.045)!important;
  padding-top:4px!important;
}
.fcc-nav-row>.tabs{
  grid-column:2!important;
  width:max-content!important;
  max-width:100%!important;
  justify-self:center!important;
  justify-content:center!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
.fcc-nav-row>.fcc-zoom-action{
  grid-column:3!important;
  justify-self:end!important;
  margin-left:18px!important;
  padding-left:18px!important;
  padding-right:14px!important;
  border-left:1px solid #35424a!important;
  border-radius:8px!important;
  background:rgba(19,185,235,.035)!important;
}
.fcc-nav-row>.fcc-zoom-action:hover{
  background:rgba(19,185,235,.09)!important;
}
.fcc-nav-row>.fcc-zoom-action::after{
  left:18px!important;
  right:14px!important;
}

/* Keep the workflow visually centered even on very wide monitors. */
@media(min-width:1450px){
  .topinner{width:min(1660px,100%)!important}
  .fcc-nav-row>.tabs{padding-inline:12px!important}
}

/* Mid-sized desktops/laptops: the workflow scrolls in its own lane while Zoom stays detached. */
@media(max-width:1250px){
  .topinner{grid-template-columns:minmax(180px,1fr) minmax(0,1fr) minmax(210px,1fr)!important}
  .topinner>.fcc-nav-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  .fcc-nav-row>.tabs{
    grid-column:1!important;
    width:100%!important;
    justify-self:stretch!important;
    justify-content:flex-start!important;
  }
  .fcc-nav-row>.fcc-zoom-action{
    grid-column:2!important;
    margin-left:6px!important;
    padding-left:14px!important;
  }
}

/* Phone/tablet: preserve touch-friendly scrolling and keep zoom as a distinct control at the right. */
@media(max-width:760px){
  .topinner{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:7px 10px!important;
  }
  .topinner>.brand{grid-column:1!important;grid-row:1!important}
  .topinner>.cloud-user{grid-column:2!important;grid-row:1!important}
  .topinner>.fcc-nav-row{
    grid-column:1/-1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    padding-top:4px!important;
  }
  .fcc-nav-row>.tabs{
    grid-column:1!important;
    width:100%!important;
    justify-content:flex-start!important;
  }
  .fcc-nav-row>.fcc-zoom-action{
    grid-column:2!important;
    min-width:92px!important;
    margin-left:0!important;
    padding:9px 10px!important;
    border-left:1px solid #35424a!important;
  }
}