/* Appearance only. Existing icon order, gesture areas and reveal labels stay intact. */
html { min-height: 100%; }
html:not(.android)[data-home-style="modern"] {
  --home-icon-size: clamp(50px, 16vw, 68px);
  --home-row-pitch: clamp(77px, 11.4vh, 103px);
}
html:not(.android)[data-home-style="modern"] .screen {
  padding-top: calc(env(safe-area-inset-top, 0px) + 17px);
}
html:not(.android)[data-home-style="modern"] .app-grid {
  column-gap: 0;
  row-gap: 0;
  grid-auto-rows: var(--home-row-pitch);
  padding: 0 4vw;
}
html:not(.android)[data-home-style="modern"] .app {
  width: var(--home-icon-size);
  height: var(--home-icon-size);
  border-radius: 23.5%;
}
html:not(.android)[data-home-style="modern"] .app-label {
  max-width: 23vw;
  margin-top: 5px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}
.modern-decoration { display: none; pointer-events: none; }
html:not(.android)[data-home-style="modern"] .modern-decoration {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  pointer-events: none;
}
html:not(.android)[data-home-style="modern"] .modern-decoration-icon {
  width: var(--home-icon-size);
  height: var(--home-icon-size);
  border-radius: 23.5%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
html:not(.android)[data-home-style="modern"] .modern-decoration-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
html:not(.android)[data-home-style="modern"] .modern-decoration-label {
  max-width: 23vw;
  margin-top: 5px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}
html:not(.android)[data-home-style="modern"] .dock-area {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
}
html:not(.android)[data-home-style="modern"] .dock-area::before {
  content: '\2315  Search';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 18px);
  transform: translateX(-50%);
  padding: 6px 11px;
  border-radius: 20px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
html:not(.android)[data-home-style="modern"] .dock-background {
  width: 94%;
  max-width: 440px;
  height: calc(var(--home-icon-size) + 30px);
  box-sizing: border-box;
  border-radius: 34px;
  background: rgba(235,240,250,.12);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), 0 3px 14px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  backdrop-filter: blur(20px) saturate(110%);
  transform: none;
}
html:not(.android)[data-home-style="modern"] .dock-row {
  width: 94%;
  max-width: 440px;
  height: calc(var(--home-icon-size) + 30px);
  box-sizing: border-box;
  justify-content: space-around;
  align-items: center;
  gap: 0;
  padding: 0 1vw;
  margin-top: 0;
}
html.android[data-home-style="modern"] .app,
html.android[data-home-style="round"] .app {
  border-radius: 28%;
  background-position: center;
  background-size: 106% 106%;
  background-repeat: no-repeat;
}
html.android[data-home-style="round"] .app { border-radius: 50%; }
/* Platform artwork from Unexpected Delivery, matched to the same app roles. */
html:not(.android)[data-home-style="modern"] .app[style*="/icon2.png"] {
  background-image: url('images/modern/ios/icon2.png') !important;
  background-color: #fff;
  background-size: 84%;
  background-repeat: no-repeat;
}
html:not(.android)[data-home-style="modern"] .app[style*="/icon3.png"] {
  background-image: url('images/modern/ios/icon3.png') !important;
  background-color: #d3d3d6;
  background-size: 100%;
  background-repeat: no-repeat;
}
html:not(.android)[data-home-style="modern"] .app[style*="/icon5.png"] {
  background-image: url('images/modern/ios/icon5.png') !important;
  background-color: #078ff2;
  background-size: 100%;
  background-repeat: no-repeat;
}
html:not(.android)[data-home-style="modern"] .app[style*="/icon16.png"] {
  background-image: url('images/modern/ios/icon16.png') !important;
  background-color: #d1d1d5;
  background-size: 92%;
  background-repeat: no-repeat;
}
html.android:is([data-home-style="modern"],[data-home-style="round"]) .app[style*="/icon5.png"] {
  background-image: url('images/modern/android/icon5.png') !important;
  background-color: #e8e9eb;
}
html.android:is([data-home-style="modern"],[data-home-style="round"]) .app[style*="/icon6.png"] {
  background-image: url('images/modern/android/icon6.png') !important;
  background-color: #d9dce0;
}
html.android:is([data-home-style="modern"],[data-home-style="round"]) .app[style*="/icon16.png"] {
  background-image: url('images/modern/android/icon16.png') !important;
  background-color: #30363d;
}
html.android:is([data-home-style="modern"],[data-home-style="round"]) .app[style*="/icon21.png"] {
  background-image: url('images/modern/android/icon21.png') !important;
  background-color: #04bb63;
}
@media (max-height: 700px) {
  html:not(.android)[data-home-style="modern"] {
    --home-row-pitch: calc((100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 190px) / 6);
    --home-icon-size: min(15vw, calc(var(--home-row-pitch) - 22px));
  }
}