/* Final delivery safeguards for project-library, plan status, and responsive layout. */

/* Keep search and sorting as one compact control group. */
.projectLibraryToolbar{
  display:grid!important;
  grid-template-columns:minmax(250px,600px) auto minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:start!important;
  gap:10px!important;
}
.projectLibraryToolbar>label{width:auto!important;min-width:0!important}
.projectLibraryFilter{justify-self:start!important;align-self:stretch!important}
.projectLibraryFilterButton{white-space:nowrap!important}
.projectLibraryFilterButton span,
.projectLibraryFilterMenu>strong{font-size:0!important}
.projectLibraryFilterButton span::after,
.projectLibraryFilterMenu>strong::after{content:"Sort by";font-size:.76rem!important}
.projectLibraryCountGroup{justify-self:end!important}

/* Detailed estimate belongs beneath the price, not beside it. */
.topProjectStrip .stripPrice{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
}
.topProjectStrip .stripPrice .detailedEstimateLink{
  display:block!important;
  order:20!important;
  width:100%!important;
  margin:.3rem 0 0!important;
  text-align:right!important;
}

/* Signed-out calls to action should have clear breathing room. */
.projectReferenceShowcase .projectReferenceHeader>.showcaseV3SignIn{
  position:relative!important;
  z-index:4!important;
  width:min(390px,100%)!important;
  margin:28px auto 36px!important;
}
.projectReferenceShowcase .projectReferenceConsole{
  margin-top:0!important;
  padding-top:50px!important;
}
.profileInformationShowcase .profileInfoHeader>.showcaseV3SignIn{
  width:min(390px,100%)!important;
  margin:24px auto!important;
}

/* Keep the four inventory benefits readable instead of compressed. */
.inventoryReferenceShowcase .inventoryReplicaFeatures{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:18px!important;
}
.inventoryReferenceShowcase .inventoryReplicaFeatures>li{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:start!important;
  gap:10px!important;
  min-width:0!important;
  padding:15px 12px!important;
}
.inventoryReferenceShowcase .inventoryReplicaFeatures>li>svg{
  width:38px!important;
  height:38px!important;
  margin:0!important;
}
.inventoryReferenceShowcase .inventoryReplicaFeatures>li>span{
  display:grid!important;
  min-width:0!important;
  gap:4px!important;
}
.inventoryReferenceShowcase .inventoryReplicaFeatures b{
  font-size:.78rem!important;
  line-height:1.25!important;
}
.inventoryReferenceShowcase .inventoryReplicaFeatures small{
  font-size:.69rem!important;
  line-height:1.42!important;
}

/* The footer is a true page footer, including when the dashboard is open. */
.shell>.footer{
  position:relative!important;
  clear:both!important;
  width:100%!important;
  order:999!important;
  margin:22px 0 0!important;
}

@media(max-width:900px){
  .inventoryReferenceShowcase .inventoryReplicaFeatures{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:760px){
  .projectLibraryToolbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  .projectLibraryToolbar>label{grid-column:1;grid-row:1}
  .projectLibraryFilter{grid-column:2;grid-row:1;order:initial!important;align-self:stretch!important}
  .projectLibraryFilterButton{min-height:52px!important;padding:.45rem .65rem!important}
  .projectLibraryFilterButton span{display:inline!important;font-size:0!important}
  .projectLibraryFilterButton span::after{font-size:.72rem!important}
  .projectLibraryCountGroup{grid-column:1/-1;grid-row:2;justify-self:stretch!important;justify-content:flex-end!important}

  /* Put paid-access information on its own row below the utility icons. */
  .heroUtilityActions{
    display:grid!important;
    grid-template-columns:repeat(3,max-content)!important;
    grid-auto-rows:auto!important;
    align-items:center!important;
    gap:8px!important;
    justify-items:start!important;
  }
  /* ⚠ ANYTHING BELONGING ON ROW 2 MUST SAY SO. The columns are max-content, so an item that
     auto-flows into row 2 lands in COLUMN 1 and its width then sizes that column for the whole
     grid — including row 1. The Upgrade pill is ~111px wide, so the 42px settings icon was handed a
     111px cell and the notification and account icons were pushed right, off toward the edge and
     into the hero artwork. It looked like a z-index problem and was a grid-sizing one.
     .heroRenewDate was already placed; the Upgrade button was added later and never was. */
  .heroUtilityActions .heroUpgradeButton,
  #headerUpgradeButton.heroUpgradeButton{
    grid-column:1/-1!important;
    grid-row:2!important;
    justify-self:start!important;
    max-width:100%!important;
  }
  /* Both row-2 items present (paid account mid-cycle) — keep them stacked rather than fighting for
     the same cell, which would silently overlay one on the other. */
  .heroUtilityActions .heroRenewDate{grid-row:3!important}
  .heroUtilityActions .heroRenewDate{
    grid-column:1/-1!important;
    grid-row:2!important;
    justify-self:start!important;
    min-width:0!important;
    max-width:min(250px,calc(100vw - 56px))!important;
    margin-top:10px!important;
  }
  .heroUtilityActions .heroRenewDate span,
  .heroUtilityActions .heroRenewDate time{white-space:normal!important;line-height:1.18!important}
  .hero{padding-top:154px!important}

  .projectReferenceShowcase .projectReferenceHeader>.showcaseV3SignIn{
    width:min(340px,100%)!important;
    margin:25px auto 30px!important;
  }
  .projectReferenceShowcase .projectReferenceConsole{padding-top:45px!important;margin-top:0!important}
  .inventoryReferenceShowcase .inventoryReplicaFeatures{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:470px){
  .projectLibraryToolbar{padding-inline:12px!important}
  .projectLibraryFilterButton span{font-size:0!important}
  .projectLibraryFilterButton span::after{font-size:.66rem!important}
  .projectLibraryFilterButton svg{width:24px!important;height:24px!important}
  .inventoryReferenceShowcase .inventoryReplicaFeatures{grid-template-columns:1fr!important}
  .inventoryReferenceShowcase .inventoryReplicaFeatures>li{grid-template-columns:42px minmax(0,1fr)!important}
}