/* Streak badge + refresh button grouped together in the greeting row
   (flame pulled in from the edge, refresh sitting right beside it).
   The topbar row is now empty, so its height is handed to the
   week-card tile so its text can render larger and stay readable. */

.mockup-topbar{
  display:none!important;
}

.mockup-home{
  height:calc(100dvh - 58px - env(safe-area-inset-bottom))!important;
  padding-top:calc(10px + env(safe-area-inset-top))!important;
}

.greeting-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.greeting-row h1{margin:0!important}

.greeting-row .top-actions{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  gap:8px!important;
}
.greeting-row .streak{flex:0 0 auto!important;white-space:nowrap!important;margin:0!important}
.greeting-row .refresh-plan{flex:0 0 auto!important}

/* Give the week tile noticeably larger, more legible type.
   Tightening the gap between the day columns frees up horizontal
   room, which goes straight into bigger circles/labels. */
.week-card{padding:12px 13px 13px!important}
.week-strip{gap:3px!important}
.week-day{min-height:52px!important;padding:5px 0 4px!important}
.week-day strong{font-size:14px!important}
.week-day span{font-size:17px!important;width:34px!important;height:34px!important;margin:3px auto 1px!important}
.week-legend{font-size:11px!important;margin-top:7px!important;gap:8px 12px!important}
.legend-dot{width:7px!important;height:7px!important}

#week-progress:not(:empty){margin-top:9px!important;padding-top:9px!important}
.progress-head{margin-bottom:7px!important}
.progress-head strong{font-size:11px!important}
.progress-head span{font-size:10px!important}
.progress-track{height:5px!important;margin-bottom:8px!important}
.metrics small{font-size:9px!important}
.metrics b{font-size:17px!important;margin-top:4px!important}

@media(max-height:780px){
  .mockup-home{height:calc(100dvh - 48px - env(safe-area-inset-bottom))!important}
  .week-card{padding:9px 10px 10px!important}
  .week-strip{gap:2px!important}
  .week-day{min-height:44px!important}
  .week-day strong{font-size:13px!important}
  .week-day span{width:29px!important;height:29px!important;font-size:16px!important}
  .week-legend{font-size:10px!important;margin-top:5px!important}
  #week-progress:not(:empty){margin-top:6px!important;padding-top:6px!important}
  .progress-head{margin-bottom:4px!important}
  .progress-head strong{font-size:9px!important}
  .progress-head span{font-size:8px!important}
  .progress-track{margin-bottom:5px!important}
  .metrics b{font-size:14px!important}
  .metrics small{font-size:8px!important}
}

@media(max-height:690px){
  .week-strip{gap:2px!important}
  .week-day{min-height:39px!important}
  .week-day strong{font-size:12px!important}
  .week-day span{font-size:14px!important;width:25px!important;height:25px!important}
  .week-legend{font-size:9px!important}
  .metrics b{font-size:12px!important}
}