/* Approved compact home mockup, 1 Nov.2026.
   Explicit grid-item bounds avoid aspect-ratio/min-size overflow on phones. */
#app[data-page="home"] {
  --home-tile-height: clamp(58px, 15.4vw, 104px);
  --home-icon-width: clamp(50px, 16vw, 99px);
  box-sizing: border-box;
  width: 100%; max-width: 760px !important;
  padding: 10px 16px calc(94px + env(safe-area-inset-bottom)) !important;
}
#app[data-page="home"] .top { min-height: 32px; margin: 0; }
#app[data-page="home"] .brand { font-size: clamp(23px, 5.5vw, 33px); gap: 7px; }
#app[data-page="home"] .appFlower { width: 33px; height: 33px; }
#app[data-page="home"] .top .profile { width: 40px; height: 40px; z-index: 3; }
#app[data-page="home"] .welcome {
  height: auto; min-height: 0; margin: 5px 0 13px;
  padding: 0; text-align: center;
}
#app[data-page="home"] .welcome .lead { font-size: clamp(26px, 6.8vw, 43px); line-height: 1.12; margin: 3px 0 5px; }
#app[data-page="home"] .welcome .sub { font-size: clamp(14px, 3.7vw, 21px); line-height: 1.25; margin: 0; }
#app[data-page="home"] .sectionTitle { font-size: clamp(18px, 4.6vw, 27px); margin: 15px 0 11px; line-height: 1.2; }
#app[data-page="home"] .featureGrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row; align-items: start; gap: 14px;
  width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 0;
}
#app[data-page="home"] .featureGrid > .feature {
  display: grid; grid-template-columns: var(--home-icon-width) minmax(0, 1fr) 9px;
  align-items: center; column-gap: 3px;
  box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%;
  height: var(--home-tile-height); min-height: 0 !important; max-height: none;
  aspect-ratio: auto; margin: 0; padding: 1px 9px 1px 2px;
  border: 1.3px solid #fff8e5; border-radius: 15px; overflow: hidden;
  box-shadow: inset 0 2px 2px #fffffff2, inset 0 -3px 5px #40333e35,
    inset 1px 0 1px #ffffffa6, 0 4px 6px var(--tile-shadow), 0 1px 2px #6743261c;
}
#app[data-page="home"] .featureGrid > .feature::before {
  background: radial-gradient(ellipse at 46% -15%, #ffffffa3, transparent 53%), linear-gradient(165deg,#fff2,transparent 60%,#0000000d);
}
#app[data-page="home"] .featureGrid > .feature .art {
  box-sizing: border-box; width: var(--home-icon-width) !important; max-width: 100% !important;
  min-width: 0 !important; height: calc(var(--home-tile-height) - 5px) !important;
  max-height: calc(var(--home-tile-height) - 5px) !important;
  margin: 0; transform: none; background-size: contain !important;
  filter: drop-shadow(0 3px 2px #57321138) saturate(1.08);
}
#app[data-page="home"] .featureGrid > .feature b {
  min-width: 0; max-width: 100%; font-size: clamp(13px, 3.55vw, 23px);
  font-weight: 800; line-height: 1.15; white-space: nowrap;
  letter-spacing: -.45px; color: #181d17;
}
#app[data-page="home"] .featureGrid > .feature .chevron {
  width: 9px; margin: 0; font-size: 24px; justify-self: end;
}
#app[data-page="home"] .featureGrid > .fx6-cookbook-feature {
  grid-column: 1 / -1; grid-template-columns: 36% minmax(0, 1fr) 10px;
  height: var(--home-tile-height) !important; min-height: 0 !important;
  width: 100%; max-width: 100%; min-width: 0; aspect-ratio: auto;
  padding: 1px 12px 1px 1px !important; column-gap: 8px !important;
}
#app[data-page="home"] .featureGrid > .fx6-cookbook-feature .fx6-home-icon {
  width: 100%; min-width: 0; max-width: 100%;
  height: calc(var(--home-tile-height) - 5px); margin: 0;
  background-size: cover; background-position: center 60%;
}
#app[data-page="home"] .featureGrid > .fx6-cookbook-feature b {
  font-size: clamp(17px, 4.6vw, 27px); white-space: nowrap;
}
#app[data-page="home"] .timerHero {
  box-sizing: border-box; display: grid; grid-template-columns: 31% minmax(0, 1fr) 40px;
  align-items: start; column-gap: 4px;
  width: 100%; min-width: 0; max-width: 100%;
  height: clamp(96px, 24vw, 174px); min-height: 0; aspect-ratio: auto;
  padding: 8px 11px 8px 0; margin: 0;
  border-radius: 19px; overflow: hidden;
  background: url('./assets/self-time-panorama-v10.png') center top/cover no-repeat;
}
#app[data-page="home"] .timerHero .art { width: 100%; height: 1px; min-width: 0; margin: 0; }
#app[data-page="home"] .timerCopy { min-width: 0; width: 100%; padding-top: 1px; text-align: center; }
#app[data-page="home"] .timerCopy>b { font-size: clamp(15px, 4.2vw, 29px); white-space: nowrap; line-height: 1.15; }
#app[data-page="home"] .timerCopy .clock { font-size: clamp(26px, 7vw, 49px); margin-top: 5px; line-height: 1.1; letter-spacing: -.8px; }
#app[data-page="home"] .timerToggle { width: 38px; height: 38px; min-width: 38px; margin: 0; align-self: end; justify-self: end; }
#app[data-page="home"] .moreActivities { margin: 13px 0 0; padding: 10px 14px; border-radius: 17px !important; }
#app[data-page="home"] .moreActivities summary { font-size: 14px; line-height: 1.4; }
@media (max-width: 350px) {
  #app[data-page="home"] { --home-icon-width: 47px; padding-left: 12px !important; padding-right: 12px !important; }
  #app[data-page="home"] .featureGrid { gap: 12px; }
  #app[data-page="home"] .featureGrid > .feature { padding-right: 7px; column-gap: 2px; grid-template-columns: var(--home-icon-width) minmax(0, 1fr) 7px; }
  #app[data-page="home"] .featureGrid > .feature b { font-size: 12.5px; }
  #app[data-page="home"] .featureGrid > .feature .chevron { width: 7px; font-size: 21px; }
  #app[data-page="home"] .featureGrid > .fx6-cookbook-feature { grid-template-columns: 34% minmax(0, 1fr) 9px; }
  #app[data-page="home"] .featureGrid > .fx6-cookbook-feature b { font-size: 16px; }
  #app[data-page="home"] .timerHero { grid-template-columns: 28% minmax(0, 1fr) 34px; padding-right: 8px; column-gap: 2px; }
  #app[data-page="home"] .timerCopy>b { font-size: 14px; }
  #app[data-page="home"] .timerCopy .clock { font-size: 25px; }
  #app[data-page="home"] .timerToggle { width: 32px; height: 32px; min-width: 32px; }
}
@media (min-width: 600px) {
  #app[data-page="home"] { padding: 17px 25px calc(100px + env(safe-area-inset-bottom)) !important; }
  #app[data-page="home"] .top { min-height: 38px; }
  #app[data-page="home"] .welcome { margin-top: 5px; margin-bottom: 17px; }
  #app[data-page="home"] .featureGrid { gap: 16px; }
  #app[data-page="home"] .featureGrid > .feature { border-radius: 20px; column-gap: 7px; padding-right: 14px; }
  #app[data-page="home"] .timerHero { border-radius: 24px; grid-template-columns: 33% minmax(0, 1fr) 54px; padding: 15px 18px 12px 0; }
  #app[data-page="home"] .timerToggle { width: 49px; height: 49px; min-width: 49px; }
}