/* Card-Dekho readability & mobile polish layer.
   Loads after the app styles and gently overrides the smallest sizes.
   Desktop: raises the tiniest label fonts to readable sizes.
   Mobile: app-like feel - larger tap targets, readable text, no sideways scroll. */

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

body {
  overflow-x: hidden;
}

/* ---------- All screens: floor the microscopic font sizes ---------- */
.text-\[6px\]  { font-size: 8px !important; }
.text-\[7px\]  { font-size: 9px !important; }
.text-\[9px\]  { font-size: 10px !important; }
.text-\[10px\] { font-size: 11.5px !important; }
.text-\[11px\] { font-size: 12.5px !important; }

/* ---------- Tablet and below ---------- */
@media (max-width: 1024px) {
  .text-\[10px\] { font-size: 12px !important; }
  .text-\[11px\] { font-size: 13px !important; }
  .text-xs { font-size: 13px !important; line-height: 1.45 !important; }

  button, a[href] {
    min-height: 40px;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  /* Readable body text everywhere */
  .text-\[10px\] { font-size: 12.5px !important; }
  .text-\[11px\] { font-size: 13px !important; }
  .text-xs  { font-size: 13.5px !important; line-height: 1.5 !important; }
  .text-sm  { font-size: 14.5px !important; line-height: 1.5 !important; }

  /* Headings scale down so they fit without wrapping chaos */
  h1, .text-5xl, .text-6xl, .text-7xl { font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.15 !important; }
  h2, .text-3xl, .text-4xl { font-size: clamp(21px, 6.5vw, 26px) !important; line-height: 1.2 !important; }
  h3, .text-2xl { font-size: clamp(18px, 5.5vw, 22px) !important; }

  /* App-like touch targets (Apple/Google guideline: 44px) */
  button, a[href], [role="button"] {
    min-height: 44px;
  }
  input[type="range"] {
    height: 28px !important;
    accent-color: #10b981;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
  }

  /* Cards and sections breathe less, content fits more per screen */
  .p-8  { padding: 1.15rem !important; }
  .p-6  { padding: 1rem !important; }
  .px-8 { padding-left: 1.15rem !important; padding-right: 1.15rem !important; }
  .py-8 { padding-top: 1.15rem !important; padding-bottom: 1.15rem !important; }
  .gap-8 { gap: 1rem !important; }
  .my-6 { margin-top: 0.9rem !important; margin-bottom: 0.9rem !important; }

  /* Anything trying to poke past the viewport gets clipped, not scrolled */
  section, main, div[id] {
    max-width: 100vw;
  }

  /* Tables (dashboard, compare) scroll inside their own card, not the page */
  table {
    font-size: 13px !important;
  }

  /* Modals sit comfortably on small screens */
  .rounded-3xl { border-radius: 1.1rem !important; }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  h1, .text-5xl, .text-6xl, .text-7xl { font-size: 24px !important; }
  .p-6 { padding: 0.85rem !important; }
}

/* ---------- App feel: remove tap flash, smooth momentum scrolling ---------- */
@media (max-width: 1024px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
  body {
    -webkit-overflow-scrolling: touch;
  }
}