/* Keep the new artwork's face visible in the shallow banner and portrait crops. */
body[data-theme=tide] .scene-header{background-position:center 34%;background-size:cover}
body[data-theme=glass] .wallpaper{background-position:70% bottom}
@media(max-width:1100px) and (orientation:portrait),(hover:none) and (pointer:coarse) and (orientation:portrait){
  body[data-theme=glass] .wallpaper{background-size:auto 140%;background-position:70% bottom}
}

/* Frame both eyes in the desktop banner without changing its scale or container. */
@media(min-width:1101px) and (hover:hover) and (pointer:fine){
  body[data-theme=tide] .scene-header{background-position:center 20%}
}

/* Share card widths and balanced desktop rows across both themes. */
@media(min-width:1101px) and (min-height:601px){
  body[data-theme]{
    --dashboard-width:1600px;
    --overview-height:clamp(200px,22dvh,240px);
    --daily-height:clamp(250px,28dvh,300px);
  }
  body[data-theme=tide]{
    --banner-available-height:calc(100dvh - var(--overview-height) - var(--daily-height) - var(--footer-height,16px) - var(--footer-bottom-space,max(12px,env(safe-area-inset-bottom))) - var(--layout-gap)*2 - env(safe-area-inset-top) + 16px);
    --banner-height:min(clamp(180px,15vw,320px),var(--banner-available-height));
  }
  body[data-theme=tide] .water-edge{height:72px}
  body[data-theme] .dashboard{grid-template-rows:minmax(var(--overview-height),.5fr) minmax(var(--daily-height),.5fr) var(--footer-height,16px)}
  body[data-theme] header.profile-bar{right:max(var(--page-gap),calc((100% - var(--dashboard-width))/2))}
}

/* Scale the work message and illustration to fill the card without large gaps. */
@media(min-width:1101px) and (min-height:801px){
  body[data-theme] .dashboard .daily-cards .work-card{padding:clamp(16px,1.8dvh,24px)}
  body[data-theme] .work-card .card-header{margin-bottom:10px}
  body[data-theme] .work-card.has-sticker .work-main{--sticker-size:clamp(104px,14dvh,160px);column-gap:14px}
  body[data-theme] .work-card.has-sticker #countdown{font-size:clamp(22px,calc((100cqw - var(--sticker-size) - 14px)/5.1),43px)}
  body[data-theme] .work-card[data-mode=evening] #countdown{font-size:clamp(20px,calc((100cqw - var(--sticker-size) - 14px)/10),30px);line-height:1.45}
  body[data-theme] .work-card #work-caption{margin-top:8px;line-height:1.6}
  body[data-theme] .work-card .work-progress{margin-top:12px}
}

/* Let the phone page scroll so work and holdings remain readable. */
@media(max-width:580px){
  html{height:auto;overflow-x:hidden;overflow-y:auto}
  body[data-theme]{height:auto;min-height:100dvh;overflow:visible;--hero-space:clamp(96px,18dvh,140px);--page-gap:12px;--layout-gap:12px}
  body[data-theme=tide]{--banner-height:calc(var(--hero-space) + 16px)}
  body[data-theme] .dashboard{height:auto;min-height:100dvh;grid-template-rows:190px auto var(--footer-height,20px)}
  body[data-theme] .daily-cards{grid-template-columns:minmax(0,1fr);grid-template-rows:220px 280px 48px;gap:12px}
  body[data-theme=glass] .page-footer::before{width:calc(100% + var(--page-gap)*2)}
}