/* GritHQ PWA -> current iOS Home Recovery + PrimaryDock position parity.
   Scope: Home Recovery metric visual hierarchy and a small downward dock offset.
   No icon sizing, tab sizing, page content, workout logic, Health data, or navigation semantics change. */

/* Match current iOS Recovery card: three equal circular live-value frames,
   semantic icon + label beneath, then status on a shared baseline. */
.gh-home-v2-recovery-grid{align-items:center!important}
.gh-home-v2-recovery-metric{
  min-height:98px!important;
  display:grid!important;
  grid-template-rows:60px 20px 14px!important;
  align-content:center!important;
  justify-items:center!important;
  row-gap:2px!important;
  padding:0 5px!important;
  min-width:0!important;
}
.gh-home-v2-recovery-metric>.gh-home-v2-metric-value{
  grid-row:1!important;
  align-self:center!important;
  justify-self:center!important;
  width:58px!important;
  height:58px!important;
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0 3px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.018)!important;
  color:#f4f8fb!important;
  font-size:12.5px!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
.gh-home-v2-recovery-metric.readiness>.gh-home-v2-metric-value{
  border:3px solid rgba(77,153,255,.92)!important;
}
.gh-home-v2-recovery-metric.sleep>.gh-home-v2-metric-value{
  border:2px solid rgba(168,100,232,.86)!important;
}
.gh-home-v2-recovery-metric.hrv>.gh-home-v2-metric-value{
  border:2px solid rgba(53,200,222,.90)!important;
}
.gh-home-v2-metric-label{
  grid-row:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  margin:0!important;
  min-width:0!important;
  color:#dce5ec!important;
  font-size:11px!important;
  font-weight:720!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.gh-home-v2-metric-label svg{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}
.gh-home-v2-recovery-metric.readiness .gh-home-v2-metric-label{color:#6daeff!important}
.gh-home-v2-recovery-metric.sleep .gh-home-v2-metric-label{color:#aa71e7!important}
.gh-home-v2-recovery-metric.hrv .gh-home-v2-metric-label{color:#46cadb!important}
.gh-home-v2-recovery-metric>small{
  grid-row:3!important;
  align-self:center!important;
  margin:0!important;
  line-height:1!important;
  white-space:nowrap!important;
  font-size:11px!important;
}
.gh-home-v2-health-btn{align-self:center!important}

/* Move the already-approved PWA dock down only 4 CSS px on all four primary pages.
   Geometry, icons, labels and active-state styling remain untouched. */
@media (max-width:959px){
  body:not(.workout-mode) #bottomNav.bottom-nav,
  body.home-mode #bottomNav.bottom-nav,
  html.ios-standalone body.home-mode #bottomNav.bottom-nav{
    margin-bottom:calc(3px + env(safe-area-inset-bottom))!important;
  }
}

@media(max-width:400px) and (max-height:860px) and (orientation:portrait){
  .gh-home-v2-recovery-metric{
    min-height:82px!important;
    grid-template-rows:50px 18px 12px!important;
    row-gap:1px!important;
    padding:0 3px!important;
  }
  .gh-home-v2-recovery-metric>.gh-home-v2-metric-value{
    width:48px!important;
    height:48px!important;
    font-size:10.5px!important;
  }
  .gh-home-v2-metric-label{font-size:10.5px!important;gap:3px!important}
  .gh-home-v2-metric-label svg{width:12px!important;height:12px!important;flex-basis:12px!important}
}