/*
 * PATCH 57 — canonical presentation shell and museum-glass navigation lighting.
 * Loaded last. It preserves the working panorama links and hit geometry while
 * making the artwork appear illuminated from within rather than boxed or glowing.
 */

/* --------------------------------------------------------------------------
   Compact single-row header ribbon
   -------------------------------------------------------------------------- */
.app-header {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 43px !important;
    height: 43px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(255, 250, 240, .965) !important;
    border-bottom: 1px solid rgba(91, 67, 34, .16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .84),
        inset 0 -1px 0 rgba(255, 255, 255, .58) !important;
}

.app-header__ribbon {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 41px minmax(0, 1fr) max-content !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 43px !important;
    height: 43px !important;
    gap: 5px !important;
    padding: 1px 9px !important;
    overflow: hidden !important;
}

.app-header__seal {
    grid-column: 1 !important;
    display: grid !important;
    place-items: center !important;
    position: static !important;
    width: 41px !important;
    height: 41px !important;
    min-width: 41px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
}

.app-header__seal img {
    display: block !important;
    width: 41px !important;
    height: 41px !important;
    max-width: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 1px rgba(74, 49, 21, .16)) !important;
}

.app-header .utility-links {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
}

.app-header .utility-links::-webkit-scrollbar { display: none !important; }

.app-header .utility-links > span,
.app-header .utility-links > a {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 21px !important;
    height: 21px !important;
    padding: 2px 7px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.app-header .app-header__daily-tools {
    grid-column: 3 !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    min-width: max-content !important;
    width: max-content !important;
    max-width: none !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 3 !important;
}

.app-header .tapestry-hearth-trigger,
.app-header .tapestry-compass-trigger,
.app-header .profile-signin,
.app-header .profile-identity {
    position: static !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 29px !important;
    height: 29px !important;
    margin: 0 !important;
    transform: none !important;
}

.app-header .tapestry-hearth-trigger,
.app-header .tapestry-compass-trigger { padding: 3px 8px !important; }
.app-header .profile-identity { padding: 2px 6px 2px 3px !important; }

/* --------------------------------------------------------------------------
   Panorama presentation: original artwork, invisible links, living light
   -------------------------------------------------------------------------- */
.navigation-shell,
.panorama-scroll { margin-top: 0 !important; }

.panorama-scroll {
    position: relative !important;
    z-index: 1 !important;
}

.panorama-stage {
    position: relative !important;
    isolation: isolate !important;
    margin-top: -2px !important;
    overflow: hidden !important;
    filter: contrast(1.018) saturate(1.015) brightness(1.006) !important;
}

/* Anti-reflective museum-glass wash: almost invisible, but it cleans the image. */
.panorama-stage::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(118deg,
            rgba(255, 255, 250, .11) 0%,
            rgba(255, 249, 226, .045) 27%,
            transparent 52%),
        linear-gradient(180deg,
            rgba(255, 255, 248, .045) 0%,
            transparent 46%,
            rgba(96, 70, 35, .018) 100%) !important;
    mix-blend-mode: soft-light !important;
}

/* A very quiet perimeter vignette gives the illustrated objects more depth. */
.panorama-stage::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    box-shadow:
        inset 0 10px 18px rgba(255, 252, 238, .035),
        inset 0 -8px 18px rgba(83, 57, 24, .035),
        inset 14px 0 20px rgba(89, 63, 29, .018),
        inset -14px 0 20px rgba(89, 63, 29, .018) !important;
}

.category-hit-grid {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns:
        11.0% 9.3% 9.1% 8.7% 8.7% 8.7%
        8.5% 7.8% 6.7% 6.8% 7.3% 7.4% !important;
    pointer-events: none !important;
}

.category-hit {
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.category-hit--today { grid-column: 1 !important; }
.category-hit--household { grid-column: 2 !important; }
.category-hit--home { grid-column: 3 !important; }
.category-hit--family { grid-column: 4 !important; }
.category-hit--people { grid-column: 5 !important; }
.category-hit--money { grid-column: 6 !important; }
.category-hit--library { grid-column: 7 !important; }
.category-hit--lifestyle { grid-column: 8 !important; }
.category-hit--legacy { grid-column: 9 !important; }
.category-hit--google { grid-column: 10 !important; }
.category-hit--system { grid-column: 11 !important; }
.category-hit--steward { grid-column: 12 !important; }

/*
 * Patch 58 canonical Museum Light interaction.
 * The anchor remains a rectangular accessible target, but every visible layer
 * is oversized, feathered, object-centered, and deliberately unrelated to the
 * target edges. Never apply backgrounds, filters, outlines, or shadows to the
 * anchor itself.
 */
.category-hit::before {
    content: "" !important;
    position: absolute !important;
    left: var(--glow-x, 50%) !important;
    top: var(--glow-y, 45%) !important;
    width: calc(var(--glow-width, 72%) * 1.75) !important;
    height: calc(var(--glow-height, 72%) * 1.55) !important;
    z-index: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    outline: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) rotate(var(--glow-rotation, 0deg)) scale(.94) !important;
    transform-origin: center !important;
    background:
        radial-gradient(ellipse 48% 42% at 43% 38%,
            rgba(255, 255, 244, .34) 0%,
            rgba(255, 246, 210, .20) 31%,
            rgba(238, 200, 120, .075) 56%,
            transparent 78%),
        radial-gradient(ellipse 42% 54% at 60% 52%,
            rgba(255, 237, 184, .11) 0%,
            rgba(244, 210, 139, .045) 48%,
            transparent 75%) !important;
    box-shadow: none !important;
    mix-blend-mode: screen !important;
    filter: blur(8px) saturate(.94) !important;
    transition: opacity 190ms ease, transform 220ms ease, filter 190ms ease !important;
}

/* A small floating brass glint provides non-rectangular keyboard focus. */
.category-hit::after {
    content: "" !important;
    position: absolute !important;
    left: var(--glow-x, 50%) !important;
    top: calc(var(--glow-y, 45%) + 31%) !important;
    width: min(54px, 38%) !important;
    height: 5px !important;
    z-index: 1 !important;
    border: 0 !important;
    border-radius: 50% !important;
    outline: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) rotate(var(--glow-rotation, 0deg)) scaleX(.62) !important;
    background: radial-gradient(ellipse at center,
        rgba(220, 177, 88, .82) 0%,
        rgba(250, 226, 166, .40) 38%,
        transparent 76%) !important;
    box-shadow: none !important;
    filter: blur(.35px) !important;
    transition: opacity 170ms ease, transform 190ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .category-hit:hover::before {
        opacity: .72 !important;
        transform: translate(-50%, -50%) rotate(var(--glow-rotation, 0deg)) scale(1.02) !important;
        filter: blur(8px) saturate(.98) brightness(1.025) !important;
    }
}

.category-hit.selected::before {
    opacity: .48 !important;
    transform: translate(-50%, -50%) rotate(var(--glow-rotation, 0deg)) scale(1) !important;
}

.category-hit:focus,
.category-hit:focus-visible,
.category-hit:hover,
.category-hit:active,
.category-hit.selected {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
}

.category-hit:focus-visible::before {
    opacity: .84 !important;
    transform: translate(-50%, -50%) rotate(var(--glow-rotation, 0deg)) scale(1.035) !important;
    filter: blur(7px) saturate(1.01) brightness(1.04) !important;
}

.category-hit:focus-visible::after {
    opacity: .9 !important;
    transform: translate(-50%, -50%) rotate(var(--glow-rotation, 0deg)) scaleX(1) !important;
}

.category-hit.selected:focus-visible::before { opacity: .94 !important; }

.category-hit:active::before {
    opacity: .54 !important;
    transform: translate(-50%, -50%) rotate(var(--glow-rotation, 0deg)) scale(.985) !important;
}

.category-title,
.category-flourish { display: none !important; }

/* --------------------------------------------------------------------------
   Child navigation and page-heading finishing
   -------------------------------------------------------------------------- */
.child-region {
    min-height: 39px !important;
    padding-top: 3px !important;
    padding-bottom: 4px !important;
}

.child-link {
    min-height: 29px !important;
    padding: 4px 10px !important;
    transition:
        background-color 190ms ease,
        border-color 190ms ease,
        color 190ms ease,
        box-shadow 190ms ease,
        transform 190ms ease !important;
}

.child-link:hover,
.child-link:focus-visible { transform: translateY(-1px) !important; }

.today-hero .today-hero__copy,
.today-hero .today-hero__copy:focus,
.today-hero h1,
.today-hero h1:focus,
.today-hero h1:focus-visible {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
}

@media (max-width: 1120px) {
    .app-header__ribbon {
        grid-template-columns: 40px minmax(0, 1fr) max-content !important;
        padding-inline: 7px !important;
    }

    .app-header__seal,
    .app-header__seal img {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .app-header .utility-links > span,
    .app-header .utility-links > a {
        padding-inline: 6px !important;
        font-size: 8.7px !important;
    }
}

@media (max-width: 900px) {
    .app-header__ribbon { grid-template-columns: 41px minmax(0, 1fr) max-content !important; }
    .app-header .utility-links { display: none !important; }
    .app-header .app-header__daily-tools { grid-column: 3 !important; }
}

@media (max-width: 760px) {
    .app-header,
    .app-header__ribbon {
        min-height: 48px !important;
        height: 48px !important;
    }

    .app-header__ribbon {
        grid-template-columns: 44px minmax(0, 1fr) max-content !important;
        padding: 1px 6px !important;
    }

    .app-header__seal,
    .app-header__seal img {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .category-hit.selected::before { opacity: .50 !important; }
    .category-hit:focus-visible::before { opacity: .82 !important; }
    .category-hit:focus-visible::after { opacity: .9 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .category-hit,
    .category-hit::before,
    .category-hit::after,
    .child-link {
        transition: none !important;
    }

    .category-hit:focus-visible::after {
        transform: translate(-50%, -50%) rotate(var(--glow-rotation, 0deg)) scaleX(1) !important;
    }
}

/* PATCH 70 — PHONE-ONLY PANORAMA CALIBRATION
   Desktop and tablet layouts are intentionally untouched. */
@media (max-width: 700px) {
    /* The former phone crop rendered the artwork at 164px high while the
       hit grid remained only 1080px wide. That centered a wider background
       behind a narrower click map. Scale both the painted panorama and its
       interactive stage together so every category hitbox remains aligned. */
    .panorama-scroll {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .panorama-scroll::-webkit-scrollbar {
        display: none;
    }

    .panorama-stage {
        width: 1263px !important;
        min-width: 1263px !important;
        height: 139px !important;
        aspect-ratio: auto !important;
        margin-top: 0 !important;
        background-size: 1263px 139px !important;
        background-position: left top !important;
        background-repeat: no-repeat !important;
    }

    .category-hit-grid {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        grid-template-columns:
            11.0% 9.3% 9.1% 8.7% 8.7% 8.7%
            8.5% 7.8% 6.7% 6.8% 7.3% 7.4% !important;
    }

    .category-hit {
        height: 100% !important;
        min-height: 139px !important;
    }

    /* Keep the child collection rail below the complete engraved name rail.
       The small ivory breathing space is phone-only and prevents the rail's
       top border from visually clipping the names painted into the artwork. */
    .child-region {
        position: relative !important;
        z-index: 6 !important;
        margin-top: 8px !important;
        padding-top: 10px !important;
    }
}