/* ── MOBILE COMPATIBILITY ── */

/* ── GLOBAL MOBILE FOUNDATIONS ── */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

input, textarea, select, button {
    touch-action: manipulation;
}

body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

/* Scrollable containers get momentum scrolling on iOS */
.overlay,
.modal,
#shortcutModal,
#shortcutsModal,
#focusQV,
#weekFocusQV {
    -webkit-overflow-scrolling: touch;
}

/* Ensure backdrop-filter has webkit prefix everywhere */
.geo-time-widget,
.auth-widget,
.logout-btn,
.systematic-fab,
.zenith-fab,
.icon-fab,
.nav-bar,
.week-block,
.wcard,
.sbar-pill,
.modal,
.overlay,
.timeline-container,
.cd-card,
.intel-card {
    -webkit-backdrop-filter: var(--blur-soft, blur(12px));
}

/* ─────────────────────────────────────────────
   TABLET (≤ 1024px)
───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .widgets-row {
        grid-template-columns: 1fr 1fr;
    }

    .intel-row {
        grid-template-columns: 1fr 1fr;
    }

    /* systematic.html */
    .mission-card {
        gap: 20px;
    }
    .mc-stats {
        min-width: 90px;
    }
    .time-readout {
        font-size: 3.8rem;
    }
}

/* ─────────────────────────────────────────────
   MOBILE LANDSCAPE + SMALL TABLET (≤ 768px)
───────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── SAFE AREA ── */
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    /* ── iOS INPUT ZOOM PREVENTION ──
       iOS Safari zooms when input font-size < 16px */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    .focus-inp {
        font-size: 16px !important;
    }

    .auth-input {
        font-size: 16px !important;
    }

    /* ── AUTH WIDGET ── */
    .auth-widget {
        width: calc(100vw - 40px);
        max-width: 340px;
        padding: 44px 28px;
        /* Clip-path with hard cuts doesn't work well on small screens */
        clip-path: polygon(6% 0%, 100% 0%, 100% 94%, 94% 100%, 0% 100%, 0% 6%);
    }

    .auth-brand {
        font-size: 2.4rem;
        margin-bottom: 28px;
    }

    /* ── FIXED ELEMENT LAYOUT ──
       Rearrange the four fixed corners so they don't collide */

    /* Logout: keep top-left but account for safe area */
    .logout-btn {
        top: max(16px, env(safe-area-inset-top, 16px));
        left: 16px;
        width: 40px;
        height: 40px;
    }

    /* Geo-time: compact pill that doesn't overlap header content */
    .geo-time-widget {
        position: fixed;
        top: max(16px, env(safe-area-inset-top, 16px));
        right: 16px;
        left: auto;
        padding: 8px 14px;
        gap: 10px;
        border-radius: 14px;
        z-index: 10000;
    }

    .gt-clock {
        padding-right: 10px;
    }

    .gt-time {
        font-size: 1.25rem;
    }

    .gt-date {
        display: none; /* hide date on mobile to save space */
    }

    /* hide coordinates on mobile */
    .gt-coords {
        display: none;
    }

    .gt-city {
        font-size: 0.72rem;
    }

    /* ── HEADER ── */
    header {
        padding-top: 72px; /* clear logout + geo widget row */
        margin-bottom: 16px;
    }

    .hd-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }

    .brand-lockup {
        gap: 12px;
    }

    .brand-icon {
        width: 34px;
        height: 38px;
    }

    .brand-name {
        font-size: 2.4rem !important;
        letter-spacing: 1px;
    }

    .hd-live {
        padding: 6px 14px;
        font-size: 0.62rem;
    }

    /* ── WRAP ── */
    .wrap {
        padding: 0 14px;
    }

    /* ── STATS BAR ── */
    .stats-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .sbar-pill {
        padding: 12px 6px;
    }

    .pv {
        font-size: 1.5rem;
    }

    .pl {
        font-size: 0.52rem;
        letter-spacing: 1px;
    }

    /* ── TIMELINE BAR ── */
    .timeline-container {
        padding: 18px 16px 14px;
    }

    .tl-bar-wrap {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .tl-bar {
        min-width: 560px;
        height: 48px;
    }

    .tl-ticks {
        min-width: 560px;
    }

    .tl-seg-lbl {
        font-size: 0.4rem;
    }

    .timeline-header {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
    }

    /* ── WIDGETS ROW ── */
    .widgets-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 14px;
    }

    .wcard {
        padding: 16px 10px;
    }

    .wc-val {
        font-size: 1.5rem;
    }

    /* ── COUNTDOWN ── */
    .countdown-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .cd-val {
        font-size: 2.4rem;
    }

    .cd-card {
        padding: 20px 16px 16px;
    }

    /* ── INTEL ROW ── */
    .intel-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .intel-card .val {
        font-size: 2.2rem;
    }

    /* ── NAV BAR ── */
    .nav-bar {
        padding: 4px 12px;
        border-radius: 50px;
    }

    .nav-range {
        font-size: 0.75rem;
    }

    .nav-btn {
        width: 36px;
        height: 36px;
    }

    .nav-today {
        padding: 0 16px;
        height: 36px;
        font-size: 0.62rem;
    }

    /* ── WEEK BLOCKS ── */
    .week-block {
        border-radius: 18px;
    }

    .week-head {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .wh-pills {
        flex-wrap: wrap;
        gap: 6px;
    }

    .wh-pill {
        font-size: 0.58rem;
        padding: 3px 8px;
    }

    .btn-export {
        font-size: 0.62rem;
        padding: 4px 10px;
    }

    /* Week day grid: horizontal scroll so layout is preserved */
    .days-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block; /* override grid for scroll container */
        white-space: nowrap;
    }

    .days-grid > .day-col {
        display: inline-block;
        vertical-align: top;
        white-space: normal;
        width: 130px;
        min-height: 140px;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
    }

    .days-grid > .day-col:last-child {
        border-right: none;
    }

    .dc-num {
        font-size: 1.2rem;
    }

    /* ── WEEK FOOTER ── */
    .week-foot {
        grid-template-columns: repeat(3, 1fr);
        padding: 8px 0;
    }

    .wf-v {
        font-size: 0.88rem;
    }

    .wf-l {
        font-size: 0.48rem;
    }

    /* ── LEGEND ── */
    .legend {
        border-radius: 20px;
        padding: 10px 16px;
        gap: 12px;
    }

    .leg-item {
        font-size: 0.62rem;
    }

    /* ── MODAL ── */
    .overlay {
        align-items: flex-end; /* sheet from bottom on mobile */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .modal {
        width: 100%;
        max-width: 100%;
        border-radius: 28px 28px 0 0;
        padding: 24px 20px max(20px, env(safe-area-inset-bottom, 20px));
        max-height: 92vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tog-grid {
        gap: 10px;
        margin-bottom: 20px;
    }

    .m-tog {
        padding: 14px 6px;
        border-radius: 20px;
    }

    .m-tog i {
        font-size: 1.5rem;
    }

    /* ── FIXED FABs ── */
    /* Bottom-left: systematic-fab */
    .systematic-fab {
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
        left: 14px;
        padding: 9px 14px;
        font-size: 0.58rem;
    }

    /* Bottom-right: icon-fab-stack */
    .icon-fab-stack {
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
        right: 14px;
        gap: 8px;
    }

    .icon-fab {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    /* ── FOCUS QV MODALS ── */
    .fqv-card,
    .wfqv-card,
    .sc-card {
        width: calc(100vw - 32px);
        max-width: 380px;
        padding: 28px 24px 20px;
    }

    .fqv-num,
    .wfqv-num {
        font-size: 3rem;
    }

    .sc-card {
        width: calc(100vw - 32px);
        max-width: 380px;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── SHORTCUTS MODAL ── */
    .shortcut-content {
        width: calc(100vw - 32px);
        max-width: 340px;
        max-height: 80vh;
        overflow-y: auto;
        padding: 24px 20px;
    }

    /* ── MONTH BRICKS ── */
    .month-track {
        gap: 10px;
    }

    /* ── systematic.html MOBILE ── */

    body.view-sys {
        padding: 56px 12px max(48px, calc(48px + env(safe-area-inset-bottom, 0px)));
    }

    .hud-toggle {
        top: max(12px, env(safe-area-inset-top, 12px));
        right: 12px;
        width: 40px;
        height: 40px;
    }

    .shortcut-toggle {
        top: max(12px, env(safe-area-inset-top, 12px));
        right: 64px;
        width: 40px;
        height: 40px;
    }

    .time-readout {
        font-size: 3rem;
        letter-spacing: 1px;
    }

    .date-readout {
        font-size: 0.78rem;
    }

    .week-count {
        font-size: 3.8rem;
    }

    .streak-number {
        font-size: 3.5rem;
    }

    .cd-val {
        font-size: 2rem;
    }

    /* mission cards: stack vertically on mobile */
    .mission-card {
        flex-direction: column;
        gap: 14px;
        padding: 18px 16px;
        align-items: flex-start;
    }

    .mc-identity {
        min-width: unset;
        width: 100%;
    }

    .mc-progress {
        width: 100%;
    }

    .mc-stats {
        width: 100%;
        text-align: left;
        min-width: unset;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mc-days-num {
        font-size: 2.2rem;
    }

    .mc-sub-stats {
        justify-content: flex-start;
    }

    /* calendar grid: allow cells to be smaller */
    .cal-grid {
        gap: 3px;
    }

    .day-cell {
        min-height: 44px;
        padding: 4px 2px;
    }

    .day-cell .cal-num {
        font-size: 0.85rem;
    }

    .day-cell .cal-tag {
        font-size: 0.45rem;
    }

    .day-head {
        font-size: 0.65rem;
        padding: 7px 0;
    }

    .cal-legend {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* bottom-left stack: adjust for mobile FABs */
    .bottom-left-stack {
        bottom: max(72px, calc(72px + env(safe-area-inset-bottom, 0px)));
        left: 14px;
        width: 170px;
    }

    /* zenith FAB */
    .zenith-fab {
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
        left: 14px;
        padding: 8px 14px;
        font-size: 0.9rem;
    }

    /* status bar */
    .status-bar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 16px;
        border-radius: 16px;
    }

    /* hud menu */
    .hud-menu {
        right: 12px;
        top: 60px;
        min-width: 190px;
    }

    /* panels */
    .panel {
        padding: 18px 16px;
    }

    .panel-title {
        font-size: 1rem;
    }
}

/* ─────────────────────────────────────────────
   PHONE PORTRAIT (≤ 480px)
───────────────────────────────────────────── */
@media (max-width: 480px) {

    /* ── STATS BAR: 2 cols ── */
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* ── BRAND ── */
    .brand-name {
        font-size: 2rem !important;
    }

    .brand-icon {
        width: 28px;
        height: 32px;
    }

    /* ── GEO WIDGET: ultra compact ── */
    .gt-loc {
        display: none;
    }

    .gt-clock {
        border-right: none;
        padding-right: 0;
    }

    .geo-time-widget {
        padding: 7px 12px;
    }

    /* ── WIDGETS ROW: single col ── */
    .widgets-row {
        grid-template-columns: 1fr;
    }

    /* ── WEEK FOOTER: 2 cols ── */
    .week-foot {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 10px 8px;
    }

    /* ── NAV BAR ── */
    .nav-range {
        font-size: 0.65rem;
    }

    /* ── TIMELINE compact ── */
    .tl-bar {
        min-width: 480px;
        height: 38px;
    }

    .tl-ticks {
        min-width: 480px;
    }

    .tl-tick {
        font-size: 0.38rem;
    }

    /* ── CD VAL ── */
    .cd-val {
        font-size: 2rem;
    }

    .cd-eyebrow {
        font-size: 0.42rem;
    }

    /* ── MODAL ── */
    .m-tog i {
        font-size: 1.35rem;
    }

    .m-tog {
        padding: 12px 4px;
    }

    /* ── INTEL CARD ── */
    .intel-card .val {
        font-size: 2rem;
    }

    /* ── systematic: calendar tighter ── */
    .cal-grid {
        gap: 2px;
    }

    .day-cell {
        min-height: 38px;
    }

    .day-cell .cal-num {
        font-size: 0.75rem;
    }

    .day-cell .cal-tag {
        display: none; /* hide tag labels on small phones */
    }

    .time-readout {
        font-size: 2.5rem;
    }

    .week-count {
        font-size: 3rem;
    }

    .streak-number {
        font-size: 2.8rem;
    }
}

/* ─────────────────────────────────────────────
   SMALL PHONE (≤ 390px — iPhone SE etc.)
───────────────────────────────────────────── */
@media (max-width: 390px) {
    .wrap {
        padding: 0 10px;
    }

    .brand-name {
        font-size: 1.75rem !important;
    }

    .stats-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .pv {
        font-size: 1.3rem;
    }

    .pl {
        font-size: 0.48rem;
        letter-spacing: 0.5px;
    }

    .sbar-pill {
        padding: 10px 4px;
    }

    .nav-range {
        font-size: 0.6rem;
        letter-spacing: -0.5px;
    }

    .nav-btn,
    .logout-btn {
        width: 36px;
        height: 36px;
    }

    .hd-top {
        margin-bottom: 14px;
    }

    .modal {
        padding: 20px 14px max(16px, env(safe-area-inset-bottom, 16px));
    }
}

/* ─────────────────────────────────────────────
   LANDSCAPE ORIENTATION ON PHONES
───────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
    header {
        padding-top: 56px;
    }

    .geo-time-widget {
        top: max(8px, env(safe-area-inset-top, 8px));
    }

    .logout-btn {
        top: max(8px, env(safe-area-inset-top, 8px));
    }

    /* In landscape, modal shouldn't be full-height sheet */
    .modal {
        border-radius: 20px;
        max-height: 90vh;
        width: 90%;
        max-width: 460px;
    }

    .overlay {
        align-items: center;
    }

    body.view-sys {
        padding: 44px 16px max(32px, calc(32px + env(safe-area-inset-bottom, 0px)));
    }
}

/* ─────────────────────────────────────────────
   iOS SAFARI SPECIFIC FIXES
───────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
    /* Prevent rubber-band scroll on body */
    body {
        position: relative;
    }

    /* Ensure fixed elements respect notch on iPhone X+ */
    .geo-time-widget {
        top: max(16px, env(safe-area-inset-top, 16px));
        right: max(16px, env(safe-area-inset-right, 16px));
    }

    .logout-btn {
        top: max(16px, env(safe-area-inset-top, 16px));
        left: max(16px, env(safe-area-inset-left, 16px));
    }

    .systematic-fab,
    .zenith-fab {
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
        left: max(14px, env(safe-area-inset-left, 14px));
    }

    .icon-fab-stack,
    .bottom-left-stack {
        right: max(14px, env(safe-area-inset-right, 14px));
    }

    /* Fix for momentum scroll inside overlays */
    .modal,
    .sc-card,
    .shortcut-content {
        -webkit-overflow-scrolling: touch;
    }

    /* Remove iOS input shadows */
    input,
    textarea {
        -webkit-appearance: none;
        appearance: none;
    }

    /* Prevent iOS from highlighting interactive elements */
    button,
    a,
    [onclick] {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
}

/* ─────────────────────────────────────────────
   ANDROID CHROME SPECIFIC
───────────────────────────────────────────── */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Ensure smooth rendering for high-DPI screens */
    .brand-icon,
    .icon-fab svg {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ─────────────────────────────────────────────
   HIGH DPI / RETINA
───────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .brick {
        border-width: 0.5px;
    }

    .tl-indicator {
        width: 2px;
    }
}

/* ─────────────────────────────────────────────
   TOUCH DEVICE HOVER OVERRIDE
   Disable hover effects that look broken on touch
───────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .sbar-pill:hover,
    .wcard:hover,
    .intel-card:hover,
    .cd-card:hover,
    .day-col:hover,
    .mission-card:hover,
    .day-cell:hover,
    .panel:hover,
    .metric-cell:hover {
        transform: none;
        background: unset;
        border-color: unset;
        box-shadow: unset;
    }

    /* Keep active/tap states instead */
    .sbar-pill:active { transform: scale(0.97); }
    .wcard:active { transform: scale(0.97); }
    .intel-card:active { transform: scale(0.98); }
    .day-col:active { background: rgba(61, 214, 140, 0.12); }
    .day-cell:active { border-color: var(--hero-red, #e03a3e); }
    .m-tog:active { transform: scale(0.96); }

    /* Nav buttons still need some feedback */
    .nav-btn:not(:disabled):active {
        background: var(--gym);
        border-color: var(--gym);
        color: #0a1018;
    }

    .logout-btn:active {
        background: #ff4b2b;
        color: white;
    }

    .auth-btn:active {
        filter: brightness(1.15);
    }

    /* FABs */
    .systematic-fab:active,
    .zenith-fab:active {
        transform: scale(0.97);
    }

    .icon-fab:active {
        transform: scale(0.94);
    }
}