/* ════════════════════════════════════════════════════════════════
   Radin Engine — Mobile-first responsive foundation
   Breakpoints: xs <480  sm <640  md <960  lg ≥960
   Strategy: CSS-first with !important overrides on inline styles
   ════════════════════════════════════════════════════════════════ */

:root {
  --re-void: #050505;
  --re-surface: #0c0c0e;
  --re-surface-hi: #141418;
  --re-line: #1a1a1e;
  --re-line-strong: #23232a;
  --re-text: #e5e7eb;
  --re-muted: #888;
  --re-dim: #666;
  --re-faint: #444;
  --re-up: #10b981;
  --re-dn: #ef4444;
  --re-warn: #f59e0b;
  --re-sky: #60a5fa;
  --re-violet: #a78bfa;
  --re-grad: linear-gradient(135deg, #a78bfa 0%, #60a5fa 40%, #dbeafe 75%, #ffffff 100%);

  /* Safe-area env() vars — fallback to 0 on non-iOS */
  --re-safe-top: env(safe-area-inset-top, 0);
  --re-safe-bottom: env(safe-area-inset-bottom, 0);
  --re-safe-left: env(safe-area-inset-left, 0);
  --re-safe-right: env(safe-area-inset-right, 0);

  /* Touch-target minimum (WCAG AA: 44x44) */
  --re-touch: 44px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--re-void);
  color: var(--re-text);
  font-family: 'Helvetica Neue', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  height: 100vh;
  /* Hard safety: never allow horizontal scroll at root */
  overflow-x: hidden;
  max-width: 100vw;
  /* Prevent iOS text-autosize issues */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Better font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent overscroll bounce on iOS */
  overscroll-behavior: none;
}

* { box-sizing: border-box; }
#root { height: 100vh; min-height: 100vh; min-height: 100dvh; max-width: 100%; overflow-x: hidden; }
#root > * { max-width: 100%; }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0c0c0e; }
::-webkit-scrollbar-thumb { background: #23232a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2f2f38; }

/* ════════ Animations ════════ */
@keyframes skelPulse {
  0%, 100% { background-position: 0% 50%; opacity: 1; }
  50% { background-position: 100% 50%; opacity: 0.6; }
}
@keyframes radinSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes radinPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 400ms ease-out; }

@keyframes re-fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes re-scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes re-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes re-pulseGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(96,165,250,0.08); }
  50%      { box-shadow: 0 0 60px rgba(167,139,250,0.18); }
}
@keyframes re-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes re-priceFlash {
  0%   { transform: scale(1); filter: drop-shadow(0 0 0 currentColor); }
  30%  { transform: scale(1.04); filter: drop-shadow(0 0 8px currentColor); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 currentColor); }
}
@keyframes re-slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.re-fade-up { opacity: 0; animation: re-fadeUp .8s cubic-bezier(.16,1,.3,1) forwards; }
.re-scale-in { opacity: 0; animation: re-scaleIn .7s cubic-bezier(.16,1,.3,1) forwards; }
.re-reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.re-reveal.re-visible { opacity: 1; transform: translateY(0); }
.re-float { animation: re-float 4s ease-in-out infinite; }
.re-pulse-glow { animation: re-pulseGlow 4s ease-in-out infinite; }
.re-gradient-text {
  background: var(--re-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ════════ Typography — fluid + prevent iOS zoom ════════ */
button, input, textarea, select {
  font-family: inherit;
  /* 16px = no zoom on iOS focus */
  font-size: 16px;
}
input:focus, textarea:focus, select:focus { outline: none; }
button { cursor: pointer; }

/* ════════ Touch target enforcement ════════ */
@media (hover: none) and (pointer: coarse) {
  /* Touch device — enforce min 44×44 on all buttons & interactive */
  button,
  .re-touch,
  [role="button"] {
    min-height: var(--re-touch);
    min-width: var(--re-touch);
  }
}

/* ════════ Splash loader ════════ */
.splash-loader {
  position: fixed; inset: 0;
  background: #050505;
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.splash-loader.fade { animation: fadeOut 400ms ease-out 500ms forwards; }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE GRID SYSTEM
   Override inline grid-template-columns via !important at breakpoint
   ════════════════════════════════════════════════════════════════ */

/* Tablet & below (< 960px) */
@media (max-width: 959px) {
  .re-grid-2 { grid-template-columns: 1fr !important; }
  .re-grid-3 { grid-template-columns: 1fr !important; }
  .re-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .re-grid-5 { grid-template-columns: 1fr 1fr !important; }

  /* Stack flex rows that should become columns */
  .re-stack-md {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .re-stack-md > * { width: 100%; }

  /* Reduce padding on dense layouts */
  .re-pad-responsive { padding: 16px !important; }
}

/* Mobile (< 640px) */
@media (max-width: 639px) {
  .re-grid-3, .re-grid-4, .re-grid-5 { grid-template-columns: 1fr !important; }

  .re-stack-sm {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .re-mobile-hide { display: none !important; }
  .re-mobile-only { display: block; }

  /* Hero price scaling */
  .re-hero-price { font-size: clamp(36px, 13vw, 72px) !important; }

  /* Reduce dense typography */
  .re-pad-responsive { padding: 14px !important; }

  /* Shrink card padding */
  .re-card-mobile { padding: 16px !important; }
}

/* Small mobile (< 480px) */
@media (max-width: 479px) {
  .re-grid-2, .re-grid-3, .re-grid-4, .re-grid-5 { grid-template-columns: 1fr !important; }
}

.re-mobile-only { display: none; }

/* ════════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL for tables (wide data)
   Wrap table in .re-scroll-x — keeps full width on mobile via scroll
   ════════════════════════════════════════════════════════════════ */
.re-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: 100%;
}
/* Desktop/tablet: inner wide tables. Phone: stretch to 100% — no outer overflow */
@media (min-width: 640px) {
  .re-scroll-x > * { min-width: 640px; }
}
@media (max-width: 639px) {
  .re-scroll-x > * { min-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   DRAWER — for mobile sidebar navigation
   ════════════════════════════════════════════════════════════════ */
.re-drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: re-fadeUp .2s ease-out;
}
.re-drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 280ms cubic-bezier(.16,1,.3,1);
  box-shadow: none;
  width: 260px; max-width: 82vw;
}
.re-drawer.open {
  transform: translateX(0);
  box-shadow: 12px 0 40px rgba(0,0,0,0.5);
}

/* ════════════════════════════════════════════════════════════════
   MODAL — full-screen on mobile, centered on desktop
   ════════════════════════════════════════════════════════════════ */
.re-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: re-fadeUp .25s ease-out;
}
.re-modal {
  width: 100%; max-width: 720px;
  max-height: 90vh; max-height: 90dvh;
  background: #0a0a0c;
  border: 1px solid var(--re-line-strong);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(96,165,250,0.05);
}

@media (max-width: 639px) {
  .re-modal-overlay { padding: 0; align-items: stretch; }
  .re-modal {
    max-width: 100%;
    /* Must be fixed height (not max-height) so inner flex:1 has space to fill */
    height: 100vh; height: 100dvh;
    max-height: 100dvh;
    border-radius: 0; border: none;
    border-top: 1px solid var(--re-line-strong);
    padding-top: var(--re-safe-top);
    padding-bottom: var(--re-safe-bottom);
  }
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD-specific responsive tweaks
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  /* BHero + EHero levels row: 4 cols → 2×2 */
  .re-hero-levels { grid-template-columns: 1fr 1fr !important; }
  .re-hero-levels > div { border-right: none !important; }

  /* BHero reasoning row: flex row → column */
  .re-hero-reasoning { flex-direction: column !important; }

  /* Confluence/MTF sections: narrower label col */
  .re-conf-row { grid-template-columns: 90px 1fr 60px 28px !important; gap: 8px !important; }
  .re-conf-row > *:nth-child(4) { display: none; }  /* hide weight col on mobile */
}

@media (max-width: 639px) {
  .re-hero-levels { grid-template-columns: 1fr 1fr !important; }
  .re-hero-levels > div { padding: 12px !important; }
  .re-conf-row { grid-template-columns: 80px 1fr 40px !important; gap: 6px !important; }
  .re-conf-row > *:nth-child(3) { display: none; }  /* hide sub-label */
  .re-conf-row > *:nth-child(4) { display: none; }
}

/* Safe-area aware containers for fixed/fullscreen */
.re-safe-top { padding-top: max(16px, var(--re-safe-top)); }
.re-safe-bottom { padding-bottom: max(16px, var(--re-safe-bottom)); }

/* Essential Hero 6-col grid → smart rearrange on mobile */
.re-ehero-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.1fr 90px 1fr 1fr 1fr 240px;
  align-items: center;
}
@media (max-width: 959px) {
  .re-ehero-grid {
    grid-template-columns: 1fr 110px !important;
    grid-template-areas:
      'price ring'
      'entry stop'
      'target target'
      'action action' !important;
    gap: 16px !important;
  }
  .re-ehero-grid > *:nth-child(1) { grid-area: price; }
  .re-ehero-grid > *:nth-child(2) { grid-area: ring; align-self: center; justify-self: end; }
  .re-ehero-grid > *:nth-child(3) { grid-area: entry; }
  .re-ehero-grid > *:nth-child(4) { grid-area: stop; }
  .re-ehero-grid > *:nth-child(5) { grid-area: target; }
  .re-ehero-grid > *:nth-child(6) {
    grid-area: action;
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--re-line) !important;
    padding-top: 14px !important;
  }
}

/* Pro BHero — flex wrap row */
.re-bhero-row {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  .re-bhero-row { gap: 16px !important; }
  .re-bhero-row > *:first-child { min-width: 0 !important; width: 100%; }
}

/* Marketing grid 2-col → single */
@media (max-width: 959px) {
  .re-market-hero {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MARKETING / LANDING responsive
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  /* Marketing nav collapse */
  .re-marketing-nav-links { display: none !important; }
  .re-marketing-nav { padding: 16px 20px !important; gap: 12px !important; }
}

/* ════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ════════════════════════════════════════════════════════════════ */
.re-hide-mobile { display: block; }
.re-show-mobile { display: none; }
@media (max-width: 639px) {
  .re-hide-mobile { display: none !important; }
  .re-show-mobile { display: block; }
}

/* Prevent horizontal overflow from SVG/images */
svg, img, video { max-width: 100%; height: auto; }
.re-svg-responsive { width: 100%; height: auto; display: block; }

/* Prevent text overflow */
.re-truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* No-tap-highlight on iOS + ensure iOS Safari fires click reliably
   on role="button" divs (needs cursor: pointer + touch-action) */
a, button, [role="button"] {
  -webkit-tap-highlight-color: rgba(96,165,250,0.15);
  cursor: pointer;
  touch-action: manipulation;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE DASHBOARD — mobile-first additions (v=8)
   ════════════════════════════════════════════════════════════════ */

/* Stagger-in keyframe for card reveal */
@keyframes re-cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.re-card-in {
  opacity: 0;
  animation: re-cardIn 520ms cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes re-slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.re-slide-up { animation: re-slideUp 320ms cubic-bezier(.16,1,.3,1) forwards; }

/* Tap feedback — press-down scale, works with touch + mouse */
.re-tap { transition: transform 120ms ease-out, opacity 120ms ease-out; }
.re-tap:active { transform: scale(0.97); opacity: 0.9; }

/* Momentum-scroll container */
.re-mscroll {
  overflow-y: auto;
  /* Must be explicit: overflow-y:auto auto-promotes overflow-x from visible → auto
     (CSS spec quirk). Without this, any absolute-positioned decorative element
     with negative right/left offset would make the whole page scroll sideways. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}
/* When used as flex column, children must keep natural height — otherwise
   flex-shrink collapses cards to a sliver and the inner scroll never engages. */
.re-mscroll > * { flex-shrink: 0; min-width: 0; max-width: 100%; }

/* Horizontal snap-scroll row (watchlist pills) */
.re-hscroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.re-hscroll::-webkit-scrollbar { display: none; }
.re-hscroll > * { scroll-snap-align: start; flex-shrink: 0; }

/* iOS Safari — prevent bounce on fixed elements, respect safe area */
.re-mobile-root {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: var(--re-safe-top);
  padding-bottom: var(--re-safe-bottom);
  padding-left: var(--re-safe-left);
  padding-right: var(--re-safe-right);
  background: var(--re-void);
}

/* Drawer — fully removed when closed (iOS paints transform ghosts otherwise) */
.re-drawer-v2 {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 82%;
  max-width: 300px;
  z-index: 200;
  background: #08080a;
  border-right: 1px solid var(--re-line);
  transform: translateX(-101%);
  transition: transform 320ms cubic-bezier(.16,1,.3,1);
  will-change: transform;
  box-shadow: none;
  visibility: hidden;
}
.re-drawer-v2.open {
  transform: translateX(0);
  box-shadow: 16px 0 48px rgba(0,0,0,0.6);
  visibility: visible;
}
.re-drawer-backdrop-v2 {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease-out;
}
.re-drawer-backdrop-v2.open {
  opacity: 1;
  pointer-events: auto;
}

/* Body-scroll lock when drawer/modal open */
body.re-lock { overflow: hidden; position: fixed; width: 100%; }