/*
 * Patch 395 — Mobile experience cleanup
 *
 * Phone layouts use a compact, touch-friendly shell instead of squeezing the
 * desktop Header Studio geometry into a narrow viewport. Desktop and tablet
 * artwork, hitboxes, routes, and published shell geometry remain unchanged.
 */

.mobile-category-region {
    display: none;
}

@media (max-width: 900px) {
    html,
    body,
    .tapestry-shell,
    main.workspace {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    main.workspace {
        overflow: visible;
    }

    .t-route-context {
        gap: .5rem;
        padding: .45rem .75rem;
    }

    .t-route-context > p {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    /* ------------------------------------------------------------------
       Compact mobile upper shell
       ------------------------------------------------------------------ */
    .t-upper-shell--production,
    .t-upper-shell--production[style*="--t-shell-layout-aspect"] {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
    }

    .t-upper-shell--production[style*="--t-shell-layout-aspect"] > .t-upper-shell__header,
    .t-upper-shell__header,
    .app-header {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        min-height: 54px !important;
        overflow: hidden !important;
    }

    .app-header__ribbon {
        display: grid !important;
        grid-template-columns: 42px minmax(92px, 1fr) max-content !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        min-height: 54px !important;
        gap: 6px !important;
        padding: 4px 8px !important;
        overflow: hidden !important;
    }

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

    .app-header .utility-links {
        grid-column: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    .app-header .utility-links > a,
    .app-header .utility-links > span {
        min-width: 0 !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 5px 9px !important;
        overflow: hidden !important;
        font-size: 11px !important;
        text-overflow: ellipsis !important;
    }

    .app-header .app-header__daily-tools {
        grid-column: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    .app-header .tapestry-compass-tools {
        display: block !important;
        min-width: 0 !important;
    }

    .app-header .tapestry-compass-trigger,
    .app-header .profile-identity {
        display: grid !important;
        place-items: center !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }

    .app-header .tapestry-compass-trigger > span:first-child {
        display: block !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
    }

    .app-header .tapestry-compass-trigger > span:not(:first-child),
    .app-header .tapestry-compass-trigger kbd,
    .app-header .profile-identity__name,
    .app-header .profile-identity__chevron,
    .app-header .profile-identity form,
    .app-header .profile-identity__signout {
        display: none !important;
    }

    .app-header .profile-identity__initial {
        width: 34px !important;
        height: 34px !important;
    }

    .app-header .profile-signin {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 58px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* The desktop panorama remains the desktop navigation authority. On a
       phone it is replaced by a compact horizontal category rail. */
    .t-upper-shell__navigation-scroll,
    .t-upper-shell--production[style*="--t-shell-layout-aspect"] .t-upper-shell__navigation-frame {
        display: none !important;
    }

    .t-upper-shell__navigation,
    .navigation-shell {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .mobile-category-region {
        position: relative !important;
        z-index: 8 !important;
        display: grid !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 7px 8px 8px !important;
        border-top: 1px solid rgba(123, 91, 45, .18) !important;
        border-bottom: 1px solid rgba(123, 91, 45, .24) !important;
        background: rgba(255, 250, 239, .98) !important;
        box-shadow: 0 4px 12px rgba(65, 48, 29, .06) !important;
    }

    .mobile-category-region__label {
        display: block !important;
        padding-inline: 3px !important;
        color: #7a6037 !important;
        font: 700 10px/1.2 system-ui, sans-serif !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }

    .mobile-category-strip {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 1px 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-category-strip::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-category-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        min-height: 42px !important;
        padding: 8px 13px !important;
        border: 1px solid rgba(121, 91, 48, .28) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .72) !important;
        color: #55442e !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .8) !important;
        font: 600 13px/1 Georgia, serif !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        scroll-snap-align: center !important;
        touch-action: manipulation !important;
    }

    .mobile-category-link.selected,
    .mobile-category-link[aria-current="page"] {
        border-color: rgba(128, 91, 35, .72) !important;
        background: #87683c !important;
        color: #fffdf5 !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 3px 9px rgba(72, 51, 24, .18) !important;
    }

    .t-upper-shell--production[style*="--t-shell-layout-aspect"] .t-upper-shell__childbar,
    .t-upper-shell__childbar,
    .child-region {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 6px 8px 7px !important;
        overflow: hidden !important;
    }

    .child-region > strong {
        display: none !important;
    }

    .child-strip,
    .t-upper-shell__child-items {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 1px 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }

    .child-strip::-webkit-scrollbar,
    .t-upper-shell__child-items::-webkit-scrollbar {
        display: none !important;
    }

    .child-link {
        flex: 0 0 auto !important;
        min-height: 42px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    /* ------------------------------------------------------------------
       Route context and page frame
       ------------------------------------------------------------------ */
    .t-route-context {
        display: block !important;
        min-height: 0 !important;
        padding: 6px 10px !important;
        overflow: hidden !important;
    }

    .t-route-context .t-nav-breadcrumbs {
        width: 100% !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    .t-route-context .t-nav-breadcrumbs::-webkit-scrollbar {
        display: none !important;
    }

    .t-route-context .t-nav-breadcrumbs ol {
        width: max-content !important;
        min-width: 100% !important;
        white-space: nowrap !important;
    }

    .t-route-context > p {
        display: none !important;
    }

    main.workspace {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    :is(
        .heirloom-workspace,
        .t-experience-shell,
        .safe-harbor-page,
        .capture-page,
        .rhythm-page,
        .chronicle-page,
        .guidebook-page,
        .intelligence-page,
        .people-page,
        .money-page,
        .lifehub-page,
        .home-page,
        .private-legacy-page,
        .standard-record-workspace,
        .account-page,
        .personalization-page
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        padding: 10px !important;
    }

    :is(
        .household-archive-layout,
        .family-archive-layout,
        .private-legacy-workspace-grid,
        .private-legacy-dashboard-grid,
        .t-split,
        .daybook-layout,
        .hearth-layout,
        .lifehub-layout,
        .intelligence-layout,
        .safe-harbor-layout,
        .system-layout,
        .capture-layout,
        .rhythm-layout,
        .chronicle-layout,
        .mail-shell,
        .google-layout,
        .standard-record-grid,
        .home-grid,
        .people-grid,
        .household-grid,
        .family-dashboard,
        .legacy-layout,
        .storyteller-detail-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 10px !important;
    }

    :is(
        .household-archive-sidebar,
        .family-archive-sidebar,
        .household-archive-detail,
        .family-archive-detail,
        .private-legacy-details,
        .lifehub-sidebar,
        .intelligence-sidebar,
        .capture-sidebar,
        .rhythm-sidebar,
        .chronicle-sidebar,
        .standard-record-detail,
        .legacy-sidebar,
        .legacy-detail
    ) {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    :is(
        .today-hero,
        .people-hero,
        .money-hero,
        .lifehub-hero,
        .home-hero,
        .safe-harbor-hero,
        .capture-hero,
        .rhythm-hero,
        .chronicle-hero,
        .guidebook-hero,
        .intelligence-hero,
        .system-hero,
        .mail-hero,
        .legacy-hero,
        .t-experience-hero,
        .homecoming-hero
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
    }

    :is(
        .today-hero__summary,
        .people-metric-grid,
        .money-metric-grid,
        .home-health-grid,
        .intelligence-health-grid,
        .safe-harbor-metrics,
        .safe-harbor-trust,
        .family-stat-grid,
        .family-action-grid,
        .family-record-grid,
        .family-memory-grid,
        .family-recipe-grid,
        .guidebook-start-grid,
        .guidebook-topic-grid,
        .guidebook-shortcut-grid,
        .experience-specimen-grid,
        .google-service-grid,
        .provider-grid,
        .builder-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    :is(
        .people-toolbar,
        .money-toolbar,
        .lifehub-toolbar,
        .legacy-toolbar,
        .mail-toolbar,
        .guidebook-toolbar,
        .capture-toolbar,
        .rhythm-toolbar,
        .chronicle-toolbar,
        .household-archive-toolbar,
        .t-page-header,
        .t-toolbar
    ) {
        align-items: stretch !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 9px !important;
    }

    :is(
        .people-hero__actions,
        .money-hero__actions,
        .safe-harbor-hero__actions,
        .capture-hero__actions,
        .rhythm-hero__actions,
        .chronicle-hero__actions,
        .guidebook-hero__actions,
        .intelligence-hero__actions,
        .system-hero-actions,
        .mail-hero__actions,
        .legacy-hero-actions,
        .t-experience-hero__actions,
        .t-page-actions,
        .button-row
    ) {
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    :is(
        .lifehub-form-grid,
        .legacy-form-grid,
        .system-form-grid,
        .capture-form-grid,
        .rhythm-form-grid,
        .chronicle-form-grid,
        .family-form-row,
        .safe-harbor-filterbar,
        .safe-harbor-snapshot-form,
        .shopping-capture
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    :is(input, select, textarea) {
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
    }

    :is(button, a, input, select, textarea) {
        touch-action: manipulation;
    }

    :is(.t-card, .t-panel, .household-card, .family-card, .people-card, .money-card, .lifehub-card) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: clamp(1.9rem, 10vw, 2.8rem) !important;
    }

    h2,
    h3,
    p,
    dd,
    li {
        overflow-wrap: anywhere;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .t-overlay,
    .people-drawer-backdrop,
    .money-drawer-backdrop {
        align-items: flex-end !important;
    }

    .t-dialog,
    .t-drawer,
    .profile-drawer,
    .tapestry-compass {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 12px) !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .tapestry-compass-backdrop {
        padding: 12px 0 0 !important;
    }

    .tapestry-compass__header,
    .tapestry-compass__search,
    .tapestry-compass__body,
    .tapestry-compass__footer {
        min-width: 0 !important;
    }
}

@media (max-width: 440px) {
    .app-header__ribbon {
        grid-template-columns: 40px minmax(76px, 1fr) max-content !important;
        gap: 4px !important;
        padding-inline: 6px !important;
    }

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

    .app-header .utility-links > a,
    .app-header .utility-links > span {
        min-height: 30px !important;
        height: 30px !important;
        padding-inline: 7px !important;
        font-size: 10px !important;
    }

    .app-header .tapestry-compass-trigger,
    .app-header .profile-identity {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .app-header .profile-signin {
        min-width: 52px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding-inline: 8px !important;
        font-size: 10px !important;
    }

    .mobile-category-region {
        padding-inline: 6px !important;
    }

    .mobile-category-link,
    .child-link {
        min-height: 40px !important;
        padding-inline: 11px !important;
        font-size: 12px !important;
    }

    :is(
        .heirloom-workspace,
        .t-experience-shell,
        .safe-harbor-page,
        .capture-page,
        .rhythm-page,
        .chronicle-page,
        .guidebook-page,
        .intelligence-page,
        .people-page,
        .money-page,
        .lifehub-page,
        .home-page,
        .private-legacy-page,
        .standard-record-workspace,
        .account-page,
        .personalization-page
    ) {
        padding: 8px !important;
    }

    :is(.t-card-body, .t-panel-body, .household-card, .family-card) {
        padding: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-category-strip,
    .child-strip,
    .t-upper-shell__child-items {
        scroll-behavior: auto !important;
    }
}