/* Shared host plus the compatibility adapter for the original three-page desktop. */
#layer-desktop {
    overflow: hidden;
}

#active-home-template-root {
    --home-font-family: inherit;
    --home-main-color: var(--text-desktop, #262626);
    --home-secondary-color: #777;
    --home-app-name-color: var(--text-desktop, #262626);
    --home-app-name-size: 12px;
    --home-widget-title-size: 16px;
    --home-widget-body-size: 13px;
    --home-decoration-size: 18px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--home-font-family);
    color: var(--home-main-color);
}

#active-home-template-root > :not(.home-profile-wallpaper-layer) {
    z-index: 1;
}

.home-profile-wallpaper-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#active-home-template-root[data-home-template="classic-v1"] #desktop-swipe-container {
    width: 100%;
    height: 100%;
}

#active-home-template-root[data-home-template="classic-v1"] .app-name,
#active-home-template-root[data-home-template="classic-v1"] .bottom-nav-item > span {
    color: var(--home-app-name-color) !important;
    font-size: var(--home-app-name-size) !important;
}

#active-home-template-root[data-home-template="classic-v1"] .p3-todo-title,
#active-home-template-root[data-home-template="classic-v1"] .p2-daily-title {
    font-size: var(--home-widget-title-size);
}

#active-home-template-root[data-home-template="classic-v1"] .p3-todo-item,
#active-home-template-root[data-home-template="classic-v1"] .p2-lyric-line {
    font-size: var(--home-widget-body-size);
}

#active-home-template-root[data-home-template="classic-v1"] .app-icon {
    width: var(--home-app-icon-size, var(--app-icon-size, 60px));
    height: var(--home-app-icon-size, var(--app-icon-size, 60px));
}

#active-home-template-root[data-home-template="classic-v1"] .dock-icon {
    width: var(--home-dock-icon-size, var(--dock-icon-size, 50px));
    height: var(--home-dock-icon-size, var(--dock-icon-size, 50px));
}

/* Classic page 1 keeps the saved pixel width as a preference, then applies a
   container-relative ceiling. The separate responsive cap is intentionally
   not --p1-photo-width: legacy layout code writes that variable inline after
   startup, which otherwise wins over stylesheet media queries. */
#active-home-template-root[data-home-template="classic-v1"] {
    --p1-photo-responsive-cap: 100%;
}

#active-home-template-root[data-home-template="classic-v1"] .p1-bottom-row {
    --p1-photo-effective-width: min(
        var(--p1-photo-width, 170px),
        var(--p1-photo-responsive-cap, 100%),
        40%
    );
    --p1-app-icon-requested-size: var(--home-app-icon-size, var(--app-icon-size, 60px));
    --p1-app-name-requested-size: var(--home-app-name-size, 12px);
    /* Each row gets half of (height - 8px grid padding - 4px row gap).
       Reserve the one-line name plus the app item's existing 8px spacing. */
    --p1-app-icon-height-budget: max(
        16px,
        calc(
            (var(--p1-apps-height, 180px) - 28px) / 2 -
            var(--p1-app-name-requested-size)
        )
    );
    gap: 12px;
    padding: 0px 20px;
    height: var(--p1-apps-height, 180px) !important;
    min-height: var(--p1-apps-height, 180px) !important;
    max-height: var(--p1-apps-height, 180px) !important;
}

#active-home-template-root[data-home-template="classic-v1"] #desktop-grid {
    /* 4px vertical padding + 4px row gap lets the default 60px icon and label
       fit in the default 180px row without flex-shrinking one axis. */
    padding: 4px 12px !important;
    gap: 4px 6px !important;
    height: 100% !important;
    max-height: var(--p1-apps-height, 180px) !important;
}

#active-home-template-root[data-home-template="classic-v1"] #desktop-grid .app-item {
    container-type: inline-size;
}

#active-home-template-root[data-home-template="classic-v1"] .p1-square-upload {
    flex: 0 0 var(--p1-photo-effective-width);
    width: var(--p1-photo-effective-width);
    max-width: 40%;
    min-width: 0;
    height: 100% !important;
    max-height: var(--p1-apps-height, 180px) !important;
}

#active-home-template-root[data-home-template="classic-v1"] #desktop-grid .app-icon {
    /* Resolve one square size against the requested size, actual grid-cell
       width and the two-row height budget; both axes consume the same value. */
    --p1-app-icon-effective-size: min(
        var(--p1-app-icon-requested-size),
        100cqw,
        var(--p1-app-icon-height-budget)
    );
    width: var(--p1-app-icon-effective-size);
    height: var(--p1-app-icon-effective-size);
    font-size: calc(var(--p1-app-icon-effective-size) / 2) !important;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

/* Older embedded WebViews without container-query units still keep a square:
   width takes the same vertical budget and the aspect ratio derives height. */
@supports not (width: 1cqw) {
    #active-home-template-root[data-home-template="classic-v1"] #desktop-grid .app-icon {
        width: min(
            var(--p1-app-icon-requested-size),
            var(--p1-app-icon-height-budget),
            100%
        );
        height: auto;
    }
}

#active-home-template-root[data-home-template="classic-v1"] #desktop-grid .app-name {
    line-height: 1;
}

@media (max-width: 400px) {
    #active-home-template-root[data-home-template="classic-v1"] {
        --p1-photo-responsive-cap: 140px;
    }
}

@media (max-width: 360px) {
    #active-home-template-root[data-home-template="classic-v1"] {
        --p1-photo-responsive-cap: 120px;
    }
}

/* Profile styles must not replace glyph fonts used by icon libraries. */
#active-home-template-root i[class*="fa-"],
#active-home-template-root i[class*="ph-"],
#active-home-template-root .fas,
#active-home-template-root .far,
#active-home-template-root .fab {
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
}

#active-home-template-root[data-home-font-mode="custom"],
#active-home-template-root[data-home-font-mode="custom"] * {
    font-family: var(--home-font-family) !important;
}

#active-home-template-root i[class*="ph-"] {
    font-family: "Phosphor-Thin" !important;
}

#active-home-template-root[data-home-font-mode="custom"] i[class*="fa-"],
#active-home-template-root[data-home-font-mode="custom"] .fas,
#active-home-template-root[data-home-font-mode="custom"] .far,
#active-home-template-root[data-home-font-mode="custom"] .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}

#active-home-template-root[data-home-font-mode="custom"] i[class*="ph-"] {
    font-family: "Phosphor-Thin", "Phosphor-Light", Phosphor !important;
}

.home-layout-hidden {
    display: none !important;
}

.home-layout-block {
    --home-layout-x: 0px;
    --home-layout-y: 0px;
    --home-layout-scale: 1;
    transform: translate3d(var(--home-layout-x), var(--home-layout-y), 0) scale(var(--home-layout-scale));
    transform-origin: center;
}

#active-home-template-root[data-home-template="classic-v1"] .bottom-nav.home-layout-block {
    transform:
        translateX(-50%)
        translate3d(var(--home-layout-x, 0px), var(--home-layout-y, 0px), 0)
        scale(var(--home-layout-scale, 1));
}

.home-profile-component {
    --home-component-bg: transparent;
    --home-component-opacity: 1;
    --home-component-image-opacity: 1;
    --home-component-blur: 0px;
    isolation: isolate;
}

/* The classic cards are static by default. Give their generated background
   layer a local containing block instead of the transformed page block. */
#active-home-template-root[data-home-template="classic-v1"] :is(
    .p2-music-widget,
    .p3-calendar-widget,
    .p3-todo-widget
) {
    position: relative;
}

.home-profile-component::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: var(--home-component-bg);
    opacity: var(--home-component-opacity);
    filter: blur(var(--home-component-blur));
}

.home-profile-component > * {
    position: relative;
    z-index: 1;
}

.home-component-style-surface {
    position: relative;
    isolation: isolate;
}

.home-component-style-surface.home-component-style-active {
    background: transparent !important;
}

.home-component-style-layer {
    position: absolute !important;
    inset: 0;
    z-index: -1 !important;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    background: var(--home-component-bg, transparent);
    opacity: var(--home-component-opacity, 1);
    filter: blur(var(--home-component-blur, 0px));
}

@media (prefers-reduced-motion: reduce) {
    #active-home-template-root *,
    #active-home-template-root *::before,
    #active-home-template-root *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}