/*
 * Global phone-width shell.
 *
 * Every Pigtopia page keeps the same portrait composition on phones and
 * desktop browsers. Desktop only adds neutral gutters around the 480px app;
 * it must not activate wider grids or desktop-only modal arrangements.
 */
:root {
    --pigtopia-phone-width: 480px;
    --pigtopia-visible-width: min(100vw, var(--pigtopia-phone-width));
}

html {
    min-width: 0;
    min-height: 100%;
    background: #e6e1dc;
}

body {
    position: relative;
    width: 100%;
    max-width: var(--pigtopia-phone-width);
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    body { overflow-x: clip; }
}

.container,
.container-wide {
    width: 100%;
    max-width: var(--pigtopia-phone-width);
}

/* Fixed layers otherwise use the complete desktop viewport instead of the app. */
:is(
    .modal-overlay,
    .preview-overlay,
    .dialog-overlay,
    .batch-bar,
    .detail-overlay,
    .post-detail-overlay,
    .tag-collection-overlay,
    .goal-image-overlay,
    .weekly-modal,
    .household-modal,
    .household-photo-preview,
    .adventure-sheet,
    .garden-modal,
    .form-page,
    .network-bar,
    .pause-overlay
) {
    right: auto !important;
    left: 50% !important;
    width: var(--pigtopia-visible-width) !important;
    max-width: var(--pigtopia-phone-width) !important;
    transform: translateX(-50%);
}

.preview-overlay img,
.goal-image-overlay img,
.household-photo-preview img,
.form-page img {
    max-width: 95%;
}

/* Keep the bottom-sheet treatment used on phones. */
.modal-overlay { align-items: flex-end; }
.modal {
    width: 100%;
    max-width: var(--pigtopia-phone-width);
    margin-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.weekly-sheet {
    width: min(calc(100% - 1rem), var(--pigtopia-phone-width));
    margin-bottom: 0;
    border-radius: 28px 28px 0 0;
}

/* Photo viewer uses its containing phone viewport, not the desktop 100vw. */
.preview-swipe-area { width: 100%; }
.swipe-track {
    width: 300%;
    transform: translateX(-33.333333%);
}
.swipe-slot { width: 33.333333%; }
.swipe-slot img { max-width: 95%; }

/* Cancel all desktop-only grid expansion. */
.photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-decor .room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.piggy-reward-grid,
.piggy-badge-grid,
.goal-badge-grid,
.memory-wall-grid,
.habitat-memory-grid,
.habitat-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.habitat-track-grid,
.weekly-goal-mini,
.weekly-selected-list,
.weekly-candidate-grid,
.achievement-board { grid-template-columns: 1fr; }

/* Inline page styles historically allowed these detail pages to grow to 600px. */
.tl-container,
.post-detail-body,
.page-roadmap .tab-content,
.page-roadmap .detail-body,
.page-wishes .form-body,
.page-timeline-publish .publish-body {
    width: 100%;
    max-width: var(--pigtopia-phone-width);
}

/* Household previously changed its internal spacing and background on desktop. */
body.page-household {
    background: linear-gradient(180deg, #f5f1eb, #f3eee8 52%, #eeeae5);
}
.household-shell { padding-top: .6rem; }

@media (min-width: 481px) {
    body {
        box-shadow: 0 0 52px rgba(63, 54, 48, .14);
    }
}