/*
 * nauticgrid — mobile-native enhancements
 * Loaded only when viewport matches (see app/layout.tsx <link media="...">).
 * Uses design tokens from app/globals.css :root / .dark (space-separated RGB).
 * Desktop uses globals + Tailwind only; this file layers "app shell" polish for small screens.
 */

/* Safe area + readable text on phones (bottom inset when tab bar is absent) */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Mobile bottom tab bar — reserve scroll space (matches Tailwind md breakpoint) */
@media (max-width: 767px) {
  :root {
    --ng-mobile-tab-h: 3.5rem;
  }

  body:has([data-mobile-bottom-nav]) {
    padding-bottom: calc(
      var(--ng-mobile-tab-h, 3.25rem) + env(safe-area-inset-bottom, 0px)
    );
  }

  /* Smooth anchor scrolling on mobile (ports region nav, crisis widget) */
  html {
    scroll-behavior: smooth;
  }
}

/* Softer tap feedback (iOS/Android) */
a,
button,
[role="button"],
input,
select,
textarea {
  -webkit-tap-highlight-color: rgba(2, 132, 199, 0.14);
}

.dark a,
.dark button,
.dark [role="button"] {
  -webkit-tap-highlight-color: rgba(56, 189, 248, 0.18);
}

/* ── "More" sheet slide-up animation ────────────────────────────────── */
@keyframes ng-sheet-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* "More" sheet — stronger glass (bottom-anchored panel sets rounding in TSX) */
[data-mobile-nav-sheet] {
  background: rgb(var(--ng-surface) / 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  box-shadow:
    0 -12px 40px rgb(15 23 42 / 0.1),
    0 0 0 1px rgb(var(--ng-border) / 0.85);
  animation: ng-sheet-up 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dark [data-mobile-nav-sheet] {
  background: rgb(var(--ng-surface) / 0.92);
  box-shadow:
    0 -16px 48px rgb(0 0 0 / 0.45),
    0 0 0 1px rgb(var(--ng-border) / 0.55);
}

/* Touch-friendly rows in the mobile menu */
[data-mobile-nav-sheet] a {
  min-height: 48px;
}

[data-mobile-nav-sheet] [data-mobile-nav-section] {
  letter-spacing: 0.06em;
}

[data-mobile-nav-drag-hint] {
  opacity: 0.85;
}

/* ── Bottom tab bar ──────────────────────────────────────────────────── */
[data-mobile-bottom-nav] {
  box-shadow: 0 -4px 24px rgb(15 23 42 / 0.06);
}

.dark [data-mobile-bottom-nav] {
  box-shadow: 0 -6px 28px rgb(0 0 0 / 0.35);
}

[data-mobile-bottom-nav] a,
[data-mobile-bottom-nav] button {
  min-height: 44px;
}

/* Tab icon: spring scale on tap */
[data-mobile-bottom-nav] a svg,
[data-mobile-bottom-nav] button svg {
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-mobile-bottom-nav] a:active svg,
[data-mobile-bottom-nav] button:active svg {
  transform: scale(0.82);
}

/* Menu trigger: minimum 44×44 tap target */
[data-mobile-nav-trigger] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Momentum scrolling inside overscroll regions */
[data-mobile-nav-sheet] {
  -webkit-overflow-scrolling: touch;
}

/* Avoid accidental horizontal page scroll on narrow viewports */
html {
  overflow-x: clip;
}

/* Flex/grid children often need min-width 0 to shrink inside max-w containers */
main {
  min-width: 0;
  max-width: 100%;
}

/* ── Story cards — mobile press feedback ─────────────────────────────── */
@media (max-width: 767px) {
  [data-story-card] {
    transition: transform 80ms ease, box-shadow 80ms ease;
    -webkit-user-select: none;
    user-select: none;
  }

  [data-story-card]:active {
    transform: scale(0.985);
  }

  /* Wider severity bar on mobile */
  [data-story-card]::before {
    width: 4px !important;
  }

  /* CRITICAL stories get a tinted background on mobile */
  [data-story-critical] {
    background: rgb(var(--ng-critical-bg) / 0.12) !important;
  }

  .dark [data-story-critical] {
    background: rgb(var(--ng-critical-bg) / 0.18) !important;
  }

  /* HIGH stories — subtle warm tint */
  [data-story-high] {
    background: rgb(var(--ng-high-bg) / 0.08) !important;
  }
}

/* ── Live ticker — mobile readability ────────────────────────────────── */
@media (max-width: 767px) {
  /* Slightly larger values so they're readable at a glance */
  [data-ticker-value] {
    font-size: 12px !important;
    font-weight: 700;
  }

  [data-ticker-label] {
    font-size: 10px !important;
  }

  /* Auto-scrolling marquee on mobile */
  [data-ticker-rail] {
    animation: ng-ticker-scroll 28s linear infinite;
  }

  [data-ticker-rail]:hover,
  [data-ticker-rail]:focus-within {
    animation-play-state: paused;
  }
}

@keyframes ng-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Breaking alert banner — mobile prominence ───────────────────────── */
@media (max-width: 767px) {
  [data-breaking-banner] {
    min-height: 52px;
    align-items: flex-start;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  [data-breaking-banner-title] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
  }
}

/* ── MobileIntelBar — top-of-fold status block ───────────────────────── */
[data-mobile-intel-bar] {
  /* Slight inset shadow for depth separation from header */
  box-shadow: 0 2px 8px rgb(15 23 42 / 0.04);
}

.dark [data-mobile-intel-bar] {
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.2);
}

/* ── Port region nav — sticky chip strip ─────────────────────────────── */
@media (max-width: 767px) {
  [data-port-region-nav] {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  [data-port-region-nav]::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-mobile-nav-sheet],
  [data-mobile-nav-sheet] * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-spin {
    animation: none !important;
  }

  [data-ticker-rail] {
    animation: none !important;
  }

  [data-story-card]:active {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  [data-mobile-nav-sheet] {
    background: rgb(var(--ng-surface));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .dark [data-mobile-nav-sheet] {
    background: rgb(var(--ng-surface));
  }
}

/* Footer legal row: comfortable tap targets without changing desktop layout much */
[data-ng-footer] [data-ng-footer-legal] a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* Theme control lives in the header chrome */
[data-ng-theme-toggle] {
  min-width: 44px;
  min-height: 44px;
}

@media (min-width: 768px) {
  [data-ng-theme-toggle] {
    min-width: 0;
    min-height: 0;
  }
}