/* ══════════════════════════════════════════════════════════════════════
   IW Mobile Base — touch detection, variables, a11y
   Canon 2026: pointer:coarse + hover:none. Load AFTER desktop styles.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Mobile tokens — GLOBAL (not gated), so dark/light both resolve ──── */
:root {
  --mob-font-xs:   clamp(10px, 2.5vw, 12px);
  --mob-font-sm:   clamp(12px, 3vw,   14px);
  --mob-font-base: clamp(13px, 3.5vw, 15px);
  --mob-font-md:   clamp(15px, 4vw,   18px);
  --mob-font-lg:   clamp(18px, 5vw,   24px);
  --mob-font-xl:   clamp(22px, 6vw,   32px);
  --mob-font-2xl:  clamp(28px, 8vw,   42px);

  --mob-gap-xs:  clamp(4px,  1.5vw, 8px);
  --mob-gap-sm:  clamp(8px,  2.5vw, 14px);
  --mob-gap-md:  clamp(14px, 4vw,   20px);
  --mob-gap-lg:  clamp(20px, 5.5vw, 28px);

  --mob-safe-top:    env(safe-area-inset-top, 0px);
  --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mob-nav-h:       56px;
  --mob-nav-total:   calc(56px + env(safe-area-inset-bottom, 0px));

  /* Glass 4 levels (Apple Liquid Glass canon 2026) — dark default */
  --mob-glass-l1: rgba(12, 17, 27, 0.92);
  --mob-glass-l2: rgba(18, 26, 39, 0.85);
  --mob-glass-l3: rgba(28, 38, 56, 0.70);
  --mob-glass-l4: rgba(8,  12, 18, 0.97);

  --mob-blur-sm: blur(8px);
  --mob-blur-md: blur(14px);
  --mob-blur-lg: blur(24px);

  --mob-ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --mob-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --mob-dur-f:   180ms;
  --mob-dur-n:   280ms;
  --mob-dur-s:   420ms;
}

/* ── Touch-only behavior (gated on pointer:coarse) ──────────────────── */
@media (pointer: coarse) {
  /* ── Base resets ──────────────────────────────────────────────────── */
  * { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  html { -webkit-overflow-scrolling: touch; }
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    overflow-x: hidden;
    overscroll-behavior-y: none;
    padding-bottom: var(--mob-nav-total);
  }

  /* ── Tap targets — Apple HIG 44px ────────────────────────────────── */
  button, [role="button"], a, input[type="checkbox"],
  input[type="radio"], select, label[for], .ni, .msw-b {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── Focus: keyboard only, not tap ───────────────────────────────── */
  *:focus:not(:focus-visible) { outline: none; }
  *:focus-visible {
    outline: 2px solid var(--eterna-ai, #00c8ff);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* ── Scrollable containers ────────────────────────────────────────── */
  .modal, .drawer, .bottom-sheet, .mob-sheet, .sb {
    overscroll-behavior: contain;
  }

  /* ── Images always in bounds ──────────────────────────────────────── */
  img, video, iframe { max-width: 100%; height: auto; }
  img[loading="lazy"] { background: rgba(255,255,255,0.04); min-height: 40px; }

  /* ── Tables → horizontal scroll ──────────────────────────────────── */
  table {
    display: block; overflow-x: auto;
    -webkit-overflow-scrolling: touch; white-space: nowrap;
  }

  /* ── Grid overrides → 1 column ───────────────────────────────────── */
  .president-grid, .president-kpis, .president-nav,
  .president-columns, .president-form { grid-template-columns: 1fr !important; }

  .president-hero, .president-user-card__top,
  .president-focus__head, .president-focus__stats { flex-direction: column !important; }
}

/* ── Remove sticky hover effects on touch ──────────────────────────── */
@media (hover: none) {
  .ava:hover, .logo:hover, .ni:hover { transform: none !important; }
}

/* ── Skeleton shimmer (CSS-only) ────────────────────────────────────── */
@keyframes mob-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.mob-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: mob-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px; color: transparent !important;
  pointer-events: none; user-select: none;
}

/* ── @starting-style entry animations ───────────────────────────────── */
.mob-sheet {
  transition: transform var(--mob-dur-n, 280ms) cubic-bezier(0,0,0.2,1),
              opacity   var(--mob-dur-f, 180ms) ease;
}
@starting-style { .mob-sheet { transform: translateY(100%); opacity: 0; } }

.mob-modal {
  transition: transform var(--mob-dur-n, 280ms) cubic-bezier(0.34,1.56,0.64,1),
              opacity   var(--mob-dur-f, 180ms) ease;
}
@starting-style { .mob-modal { transform: translateY(40px) scale(0.97); opacity: 0; } }

/* ── Content visibility for long lists ──────────────────────────────── */
@media (pointer: coarse) {
  .project-list > *, .conveyor-list > *, .media-grid > *, .clients-list > * {
    content-visibility: auto; contain-intrinsic-size: 0 80px;
  }
}

/* ── Scroll-driven progress bar (CSS-only) ───────────────────────────── */
@supports (animation-timeline: scroll()) {
  @media (pointer: coarse) {
    .mob-scroll-progress {
      position: fixed; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--eterna-ai, #00c8ff), var(--eterna-gold, #f0b34a));
      transform-origin: left;
      animation: mob-progress linear;
      animation-timeline: scroll(root block);
      z-index: 9999; pointer-events: none;
    }
    @keyframes mob-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mob-skeleton { animation: none; background: rgba(255,255,255,0.05); }
}

/* ── High contrast ────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --sw-border: rgba(170, 188, 204, 0.5);
    --sw-text-secondary: #c8d4e0;
    --eterna-gold: #ffc547;
    --eterna-ai: #33d4ff;
  }
  .card, [class*="-card"], [class*="-surface"] { border-width: 2px; }
}