/* Check Gon — Impeccable Minimalist Studio Design System */
:root {
    --bg-page: #F9F7F4;
    --bg-surface: #FFFFFF;
    --bg-subtle: #F3EFE8;
    --border-soft: #E2D9CB;
    --border-strong: #C9B9A6;
    --text-primary: #1C1713;
    --text-secondary: #43382E;
    --text-muted: #54473B;
    --accent-primary: #261F1A;
    --accent-warm: #754626;
    --accent-warm-hover: #5E371D;
    --status-ok-bg: #EBF4EE;
    --status-ok-text: #1E5436;
    --status-warn-bg: #FDF3E7;
    --status-warn-text: #734719;
    --status-danger-bg: #FDF0ED;
    --status-danger-text: #962E1C;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    body {
        padding-bottom: 4rem;
    }
}

::selection {
    background-color: #E5D5C3;
    color: #1C1713;
}

/* Explicit Typographic Hierarchy (>= 1.25x modular scale, Bold & Crisp on Mobile) */
h1 {
    font-size: clamp(1.5rem, 4vw, 1.85rem);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

h2 {
    font-size: clamp(1.225rem, 3.2vw, 1.45rem);
    line-height: 1.28;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

h3 {
    font-size: clamp(1.05rem, 2.6vw, 1.15rem);
    line-height: 1.35;
    font-weight: 600;
    color: var(--text-primary);
}

/* Prevent iOS Safari auto-zoom on form focus while keeping desktop crisp */
@media (max-width: 767px) {
    input[type="text"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Tabular numbers for live clocks, countdowns, and dates */
.tabular-nums,
#liveClock,
table td {
    font-variant-numeric: tabular-nums;
}

/* Surface container with explicit padding */
.minimal-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-soft);
    padding: 1.25rem;
    box-shadow: 0 4px 20px -6px rgba(28, 23, 19, 0.06);
    transition: transform 220ms var(--ease-out-expo), box-shadow 220ms var(--ease-out-expo), border-color 220ms var(--ease-out-expo);
}

@media (min-width: 768px) {
    .minimal-card {
        padding: 1.5rem;
    }
}

/* Accessible Touch Targets (>= 44x44px) + Premium Tactile Press Physics */
.touch-target {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 160ms var(--ease-out-expo), background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}

.touch-btn-sm {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 160ms var(--ease-out-expo), background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}

button:active,
.touch-target:active,
.touch-btn-sm:active,
.interactive-box:active {
    transform: scale(0.97);
}

/* Interactive Trigger Card Box for Expandable Schedule */
.interactive-box {
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 240ms var(--ease-out-expo), box-shadow 240ms var(--ease-out-expo), border-color 240ms var(--ease-out-expo), background-color 240ms ease;
}

.interactive-box:hover {
    border-color: var(--border-strong);
    box-shadow: 0 10px 26px -8px rgba(28, 23, 19, 0.11);
}

/* Smooth Animated Expand/Collapse Drawer (Cross-Browser Grid 0fr -> 1fr) */
.schedule-drawer-grid {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-6px);
    transition: grid-template-rows 420ms var(--ease-out-expo), opacity 320ms var(--ease-out-expo), transform 380ms var(--ease-out-expo);
}

.schedule-drawer-grid.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

.schedule-drawer-inner {
    overflow: hidden;
    min-height: 0;
}

/* Staggered Row Entrance Animation when Schedule Drawer Opens */
@keyframes rowSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.schedule-drawer-grid.is-open .stagger-row {
    animation: rowSlideUp 360ms var(--ease-out-expo) both;
}

/* Page Switch Entrance Transition */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-enter-anim {
    animation: pageEnter 280ms var(--ease-out-expo) both;
}

/* Chevron Rotation for Trigger Box */
.drawer-chevron {
    display: inline-block;
    transition: transform 320ms var(--ease-out-expo);
}

.drawer-chevron.is-open {
    transform: rotate(180deg);
}

/* Custom keyboard focus ring */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 2px;
}

/* High-contrast Pair Badges (WCAG AA >= 6.5:1) */
.nude-pill {
    background-color: #F3ECE2;
    color: #42362B;
    border: 1px solid #DECBB4;
}

.pair-badge-1 {
    background-color: #F5E9DC;
    color: #54351C;
    border: 1px solid #DEC5AC;
}

.pair-badge-2 {
    background-color: #E8F1EC;
    color: #1F4A33;
    border: 1px solid #C2D9CC;
}

.pair-badge-3 {
    background-color: #EFECE6;
    color: #3D342B;
    border: 1px solid #D6CFC3;
}

/* Page Navigation Tabs (Top & Mobile Bottom Bar) */
.nav-tab-active {
    background-color: var(--accent-primary);
    color: #FFFFFF;
    border: 1px solid var(--accent-primary);
    box-shadow: 0 3px 10px rgba(28, 23, 19, 0.16);
}

.nav-tab-inactive {
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-soft);
}

.nav-tab-inactive:hover {
    background-color: var(--bg-subtle);
    color: var(--text-primary);
}

.mobile-nav-btn-active {
    color: var(--accent-primary);
    background-color: #EFE6DA;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px #D8C8B4;
}

.mobile-nav-btn-inactive {
    color: var(--text-secondary);
    background-color: transparent;
}

/* Hide horizontal scrollbar on tab strip across all browsers */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Cross-browser backdrop blur fallback */
.glass-bar {
    background-color: rgba(249, 247, 244, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.glass-bottom-nav {
    background-color: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding-bottom: calc(0.375rem + env(safe-area-inset-bottom, 0px));
}

@keyframes softPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(150, 46, 28, 0.25);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(150, 46, 28, 0);
    }
}

.alert-round-card {
    animation: softPulse 2s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .alert-round-card,
    .page-enter-anim,
    .schedule-drawer-grid.is-open .stagger-row {
        animation: none !important;
    }
    .schedule-drawer-grid {
        transition: opacity 150ms ease !important;
        transform: none !important;
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-page);
}

::-webkit-scrollbar-thumb {
    background: #C9B9A6;
    border-radius: 9999px;
}