/*
 * Sangkhlaburi Adventure — shared mobile-first experience layer
 * Loaded after page-specific styles so every screen follows one responsive,
 * accessible baseline without rewriting each feature page.
 */

:root {
    --mf-gutter: clamp(1rem, 4vw, 1.5rem);
    --mf-content: 72rem;
    --mf-reading: 48rem;
    --mf-touch: 44px;
    --mf-radius-sm: 12px;
    --mf-radius-md: 18px;
    --mf-radius-lg: 24px;
    --mf-space-1: 0.5rem;
    --mf-space-2: 0.75rem;
    --mf-space-3: 1rem;
    --mf-space-4: 1.5rem;
    --mf-space-5: 2rem;
    --mf-space-6: 3rem;
    --mf-safe-top: env(safe-area-inset-top, 0px);
    --mf-safe-right: env(safe-area-inset-right, 0px);
    --mf-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mf-safe-left: env(safe-area-inset-left, 0px);
    --mf-focus: #1d4ed8;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    font-size: 1rem;
    line-height: 1.65;
}

img,
picture,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

input,
select,
textarea {
    min-height: var(--mf-touch);
    font-size: 1rem !important;
}

textarea {
    min-height: 7.5rem;
    resize: vertical;
}

button,
[role="button"],
.btn,
[class*="btn-"] {
    min-width: var(--mf-touch);
    min-height: var(--mf-touch);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

a {
    text-underline-offset: 0.18em;
    touch-action: manipulation;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--mf-focus) !important;
    outline-offset: 3px !important;
}

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

h1 {
    font-size: clamp(2rem, 8vw, 3.75rem);
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.5rem, 5.8vw, 2.5rem);
    line-height: 1.25;
}

h3 {
    font-size: clamp(1.15rem, 4.2vw, 1.5rem);
    line-height: 1.35;
}

main,
section,
[id] {
    scroll-margin-top: 5rem;
}

/* Shared page shells */
:where(
    .admin-container,
    .contact-container,
    .container,
    .help-container,
    .leaderboard-container,
    .legal-container,
    .marker-detail-container,
    .profile-container,
    .sitemap-container,
    .tips-page-container
) {
    width: 100% !important;
    max-width: var(--mf-content) !important;
    margin-inline: auto !important;
    padding-left: calc(var(--mf-gutter) + var(--mf-safe-left)) !important;
    padding-right: calc(var(--mf-gutter) + var(--mf-safe-right)) !important;
}

:where(.legal-container, .help-container) {
    max-width: var(--mf-reading) !important;
}

:where(
    .admin-header,
    .header,
    .marker-header,
    .page-header .header-wrapper,
    .profile-header,
    .tips-page-header
) {
    gap: var(--mf-space-3);
}

:where(.section-card, .info-card, .profile-card, .stat-card, .backup-card, .achievement-card) {
    border-radius: var(--mf-radius-md) !important;
}

/* Landing page: make the first action obvious and comfortable on a phone. */
.app-header {
    min-height: calc(4rem + var(--mf-safe-top));
    padding: calc(0.625rem + var(--mf-safe-top)) calc(var(--mf-gutter) + var(--mf-safe-right)) 0.625rem calc(var(--mf-gutter) + var(--mf-safe-left)) !important;
    gap: var(--mf-space-2);
}

.app-logo {
    width: auto;
    max-width: min(36vw, 8.5rem);
    height: 1.75rem !important;
}

.header-actions {
    min-width: 0;
    gap: 0.5rem !important;
}

.header-actions .btn-signup,
.header-actions .btn-profile-header {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desktop-nav {
    display: none;
}

.mobile-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--mf-touch);
}

.user-menu,
.close-menu {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit;
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .backend-status-banner {
    display: none !important;
}

@media (max-width: 35rem) {
    .backend-status-banner.is-visible {
        display: grid !important;
        grid-template-columns: 1.25rem minmax(0, 1fr) auto auto;
        align-items: center !important;
        gap: 0.5rem !important;
        bottom: calc(0.75rem + var(--mf-safe-bottom)) !important;
        padding: 0.65rem 0.7rem !important;
        border-radius: 0.9rem !important;
    }

    .backend-status-copy {
        grid-column: 2;
    }

    .backend-status-title {
        font-size: 0.78rem !important;
        line-height: 1.3;
    }

    .backend-status-detail {
        display: none !important;
    }

    .backend-status-action {
        grid-column: 3;
        width: auto;
        margin: 0 !important;
        padding: 0.55rem 0.65rem !important;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .backend-status-close {
        position: static !important;
        grid-column: 4;
        margin: 0 !important;
    }
}

.side-menu {
    width: min(22rem, 100%) !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: calc(var(--mf-space-3) + var(--mf-safe-top)) calc(var(--mf-space-4) + var(--mf-safe-right)) calc(var(--mf-space-4) + var(--mf-safe-bottom)) calc(var(--mf-space-4) + var(--mf-safe-left)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.menu-item {
    min-height: 3rem;
    padding-block: 0.75rem !important;
}

.hero-section {
    min-height: auto !important;
    padding: clamp(3.5rem, 14vw, 6rem) calc(var(--mf-gutter) + var(--mf-safe-right)) 3.5rem calc(var(--mf-gutter) + var(--mf-safe-left)) !important;
}

.hero-content {
    width: 100%;
}

.hero-content h1 {
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
}

.hero-content p {
    max-width: 42rem;
    margin-inline: auto;
    font-size: 1rem !important;
}

.badge-game {
    justify-content: center;
    max-width: 100%;
    font-size: 0.875rem;
}

.hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem !important;
    width: 100%;
}

.hero-actions :where(button, a, .btn-primary-glow, .btn-secondary-outline) {
    width: 100% !important;
    justify-content: center;
    margin: 0 !important;
}

.section-container {
    width: 100%;
    max-width: var(--mf-content);
    margin-inline: auto;
    padding: var(--mf-space-6) calc(var(--mf-gutter) + var(--mf-safe-right)) var(--mf-space-6) calc(var(--mf-gutter) + var(--mf-safe-left)) !important;
}

.section-header-split {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 0.75rem !important;
}

.section-header-split .btn-text {
    min-height: var(--mf-touch);
    align-items: center;
}

.ranking-grid,
.steps-grid,
.tips-grid,
.tips-grid-main,
.team-grid,
.marker-info-grid,
.stats-grid,
.backup-grid,
.storage-stats,
.profile-layout-grid,
.history-grid,
.db-schema-container,
.contact-container {
    grid-template-columns: minmax(0, 1fr) !important;
}

.rank-card-premium,
.step-card,
.info-card,
.tip-content,
.member-card {
    padding: var(--mf-space-3) !important;
}

.step-card {
    padding-top: var(--mf-space-5) !important;
}

.video-container {
    width: 100% !important;
    border-radius: var(--mf-radius-md) !important;
}

.image-slider-wrapper {
    padding-inline: 0;
}

.team-grid .team-member {
    padding-inline: 2.75rem !important;
}

.member-img {
    height: clamp(18rem, 115vw, 26rem) !important;
}

.site-footer {
    padding: var(--mf-space-6) calc(var(--mf-gutter) + var(--mf-safe-right)) calc(var(--mf-space-5) + var(--mf-safe-bottom)) calc(var(--mf-gutter) + var(--mf-safe-left)) !important;
}

.footer-content {
    grid-template-columns: 1fr !important;
    gap: var(--mf-space-5) !important;
    text-align: left !important;
}

.footer-brand,
.footer-links-list {
    align-items: flex-start !important;
}

.footer-bottom {
    margin-top: var(--mf-space-5) !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.footer-bottom-links {
    flex-wrap: wrap;
}

/* Forms, filters and modal sheets */
.form-group,
.input-group {
    min-width: 0;
}

.form-group :where(input, select, textarea),
.input-group :where(input, select, textarea),
.auth-input {
    width: 100% !important;
}

.category-filter,
.filter-tabs,
.shop-tabs,
.tabs {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    max-width: 100%;
    margin-inline: calc(var(--mf-gutter) * -1) !important;
    padding: 0 var(--mf-gutter) 0.5rem !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.category-filter::-webkit-scrollbar,
.filter-tabs::-webkit-scrollbar,
.shop-tabs::-webkit-scrollbar,
.tabs::-webkit-scrollbar {
    display: none;
}

:where(.category-filter, .filter-tabs, .shop-tabs, .tabs) > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

:where(.modal-overlay, .auth-modal-overlay, .checkin-modal-overlay, [id$="-modal"]) {
    padding: calc(0.75rem + var(--mf-safe-top)) calc(0.75rem + var(--mf-safe-right)) calc(0.75rem + var(--mf-safe-bottom)) calc(0.75rem + var(--mf-safe-left)) !important;
}

:where(.modal-content, .auth-modal, .checkin-modal) {
    width: 100% !important;
    max-width: 34rem !important;
    max-height: calc(100vh - 1.5rem - var(--mf-safe-top) - var(--mf-safe-bottom)) !important;
    max-height: calc(100dvh - 1.5rem - var(--mf-safe-top) - var(--mf-safe-bottom)) !important;
    margin: auto !important;
    padding: var(--mf-space-4) !important;
    overflow-y: auto !important;
    border-radius: var(--mf-radius-lg) !important;
    overscroll-behavior: contain;
}

.auth-close-btn,
.modal-close,
[id^="close-"] {
    min-width: var(--mf-touch) !important;
    min-height: var(--mf-touch) !important;
}

/* Detail, profile and administration screens */
.marker-detail-container,
.profile-container,
.admin-container,
.tips-page-container,
.leaderboard-container {
    padding-top: calc(var(--mf-space-3) + var(--mf-safe-top)) !important;
    padding-bottom: calc(var(--mf-space-5) + var(--mf-safe-bottom)) !important;
}

.marker-header,
.profile-header,
.admin-header,
.tips-page-header {
    padding: var(--mf-space-4) !important;
}

.marker-header h1,
.profile-header h1,
.admin-header h1,
.tips-page-header h1 {
    font-size: clamp(1.65rem, 7vw, 2.5rem) !important;
}

.marker-info-grid,
.stats-grid,
.backup-grid,
.tips-grid-main {
    gap: var(--mf-space-3) !important;
}

.profile-layout-grid {
    display: grid !important;
}

.avatar-viewer-container {
    min-height: 22rem !important;
}

.history-grid {
    display: grid !important;
}

.tips-page-header,
.admin-header,
.profile-header,
.page-header .header-wrapper {
    align-items: flex-start !important;
    flex-wrap: wrap;
}

.tips-page-header .btn-back,
.admin-header .btn-back,
.profile-header .btn-back,
.back-btn,
.btn-back {
    min-width: var(--mf-touch);
    min-height: var(--mf-touch);
}

.admin-nav,
.action-buttons,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.admin-nav > *,
.action-buttons > *,
.form-actions > * {
    flex: 1 1 9rem;
}

.table-container,
.table-wrapper,
.table-sizes,
.users-table-container,
.errors-table-container {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border-radius: var(--mf-radius-sm);
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

/* Full-screen map uses dynamic viewport and respects phone cut-outs. */
body:has(#map-container) {
    min-height: 100dvh;
}

#map-container {
    height: 100vh !important;
    height: 100dvh !important;
}

.map-header {
    top: calc(0.75rem + var(--mf-safe-top)) !important;
    right: calc(0.75rem + var(--mf-safe-right)) !important;
    left: calc(0.75rem + var(--mf-safe-left)) !important;
    gap: 0.5rem;
}

.btn-back-map {
    min-height: var(--mf-touch);
    padding: 0.625rem 0.875rem !important;
}

.map-legend {
    bottom: calc(0.75rem + var(--mf-safe-bottom)) !important;
    width: calc(100% - 1.5rem - var(--mf-safe-left) - var(--mf-safe-right)) !important;
    max-width: 26rem;
    justify-content: flex-start;
    gap: 0.75rem !important;
    padding: 0.625rem 0.75rem !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.leaflet-top {
    top: calc(4rem + var(--mf-safe-top));
}

.leaflet-popup-content {
    width: min(72vw, 16.25rem) !important;
}

.achievement-modal-content {
    width: calc(100% - 1.5rem) !important;
    max-height: calc(100dvh - 1.5rem) !important;
    overflow-y: auto;
}

/* Keep wide data useful rather than squeezing it into unreadable columns. */
@media (max-width: 47.99rem) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
    }

    .tip-actions {
        grid-template-columns: 1fr !important;
    }

    .db-schema-container {
        overflow-x: auto;
    }

    .db-table {
        width: min(17.5rem, 85vw) !important;
    }
}

/* Progressive enhancement for larger screens. */
@media (min-width: 48rem) {
    :root {
        --mf-gutter: clamp(1.5rem, 4vw, 2.5rem);
    }

    .desktop-nav {
        display: flex;
    }

    .hero-actions {
        display: flex !important;
        justify-content: center;
        width: auto;
    }

    .hero-actions :where(button, a, .btn-primary-glow, .btn-secondary-outline) {
        width: auto !important;
    }

    .section-header-split {
        align-items: flex-end !important;
        flex-direction: row;
    }

    .ranking-grid,
    .tips-grid,
    .tips-grid-main,
    .backup-grid,
    .stats-grid,
    .marker-info-grid,
    .history-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)) !important;
    }

    .steps-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .contact-container,
    .profile-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .footer-content {
        grid-template-columns: 2fr 1fr 1fr !important;
        text-align: left !important;
    }

    .footer-bottom {
        align-items: center !important;
    }

    .marker-header,
    .profile-header,
    .admin-header,
    .tips-page-header {
        padding: var(--mf-space-5) !important;
    }
}

@media (min-width: 64rem) {
    .app-logo {
        max-width: none;
        height: 2.5rem !important;
    }

    .profile-layout-grid {
        grid-template-columns: 1.5fr 1fr !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    button:hover,
    a:hover {
        transition-duration: 180ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :where(.card, .section-card, .info-card, .profile-card, .tip-card) {
        border: 2px solid currentColor !important;
    }
}