/* Phone layout (screens up to 820px wide). Desktop is untouched.
   The pages are written with inline styles, so these rules match on those styles. */
@media (max-width: 820px) {
  html { zoom: 1 !important; -webkit-text-size-adjust: 100%; }
  #app, .page { min-width: 0 !important; width: 100% !important; overflow-x: hidden; }
  .page > header, .page > section, .page > nav, .page > footer, .page > div,
  .page.wide > header, .page.wide > section, .page.wide > nav, .page.wide > footer, .page.wide > div {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  .page img { max-width: 100%; }
  .page [style*="width: 400px"], .page [style*="width: 500px"], .page [style*="width: 560px"],
  .page [style*="width: 600px"], .page [style*="max-width: 760px"] { max-width: 100% !important; }

  /* ---------- Top menu: logo + Subscribe on one line, links in a swipeable strip ---------- */
  .page > header:first-of-type {
    height: auto !important; flex-wrap: wrap; gap: 10px 14px !important;
    padding-top: 10px !important; padding-bottom: 0 !important;
  }
  .page > header:first-of-type > a:first-child img { width: 44px !important; height: 44px !important; }
  .page > header:first-of-type > nav {
    order: 3; width: calc(100% + 32px); margin: 0 -16px; padding: 12px 16px 12px;
    overflow-x: auto; white-space: nowrap; gap: 22px !important; font-size: 13px !important;
    border-top: 1px solid #5A5958; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .page > header:first-of-type > nav::-webkit-scrollbar { display: none; }
  .page > header:first-of-type > nav a { flex-shrink: 0; }
  .page > header:first-of-type > div[style*="margin-left: auto"] a { height: 38px !important; padding: 0 14px !important; font-size: 12px !important; }

  /* ---------- General stacking ---------- */
  .page [style*="grid-template-columns: repeat(2"],
  .page [style*="grid-template-columns: repeat(3"],
  .page [style*="grid-template-columns: repeat(4"],
  .page [style*="grid-template-columns: 300px 1fr 360px"],
  .page [style*="grid-template-columns: 1fr 1fr"],
  .page [style*="grid-template-columns: 2fr 1fr"],
  .page [style*="grid-template-columns: 1.4fr 1fr"],
  .page [style*="grid-template-columns: 1fr 380px"],
  .page [style*="grid-template-columns: 1fr 360px"],
  .page [style*="grid-template-columns: 1fr 340px"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Big headings */
  .page [style*="font-size: 120px"] { font-size: 60px !important; }
  .page [style*="font-size: 128px"] { font-size: 60px !important; }
  .page [style*="font-size: 96px"] { font-size: 52px !important; }
  .page [style*="font-size: 80px"] { font-size: 46px !important; }
  .page [style*="font-size: 72px"] { font-size: 46px !important; }
  .page [style*="font-size: 64px"] { font-size: 40px !important; }
  .page [style*="font-size: 56px"] { font-size: 36px !important; }
  .page [style*="font-size: 48px"] { font-size: 34px !important; }
  .page [style*="font-size: 45px"] { font-size: 34px !important; }
  .page [style*="font-size: 38px"] { font-size: 30px !important; }
  .page [style*="font-size: 22px"] { font-size: 18px !important; }

  /* Footer */
  .page > footer { flex-wrap: wrap; gap: 16px !important; padding-top: 24px !important; padding-bottom: 24px !important; }
  .page > footer nav { flex-wrap: wrap; gap: 10px 18px !important; }

  /* ---------- Home ---------- */
  #subscribe { height: auto !important; flex-direction: column; align-items: flex-start !important; gap: 24px !important; padding-top: 32px !important; padding-bottom: 36px !important; }
  #subscribe > img { width: 140px !important; height: 140px !important; }
  #subscribe form { width: 100% !important; }
  #subscribe form button { padding: 0 16px !important; }
  #doors { padding-top: 28px !important; padding-bottom: 28px !important; gap: 14px !important; }
  #doors > a { min-height: 0 !important; padding: 24px !important; }
  #contact { flex-direction: column; gap: 24px !important; }

  #subscribe > div, #contact > div { width: 100%; min-width: 0; }
  #subscribe input { min-width: 0; }

  /* Section heading rows (title on the left, link or filters on the right) */
  .page section > div[style*="justify-content: space-between"],
  .page div[style*="flex-direction: column"] > div[style*="justify-content: space-between"][style*="border-bottom"] { flex-wrap: wrap; gap: 12px; }
  .page [role="tablist"] { flex-wrap: wrap; }
  .page section > div[role="tablist"], .page section [role="tablist"][style*="margin-top: 18px"] { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; scrollbar-width: none; }
  .page [role="tablist"] button { flex-shrink: 0; }

  /* Small boxes inside cards stay two to a row (Watch List salary boxes) */
  .page [style*="grid-template-columns: repeat("][style*="gap: 6px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* ---------- Analyses ---------- */
  .page [style*="grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  .page [style*="grid-template-columns: 130px minmax(0, 1fr) auto"] { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 4px !important; }
  .page [style*="grid-template-columns: 130px minmax(0, 1fr) auto"] > :first-child { grid-column: 1 / -1; }

  /* ---------- Capsules ---------- */
  .page div[style*="display: flex; gap: 40px"] { flex-direction: column; gap: 24px !important; }
  .page [style*="width: 880px"] { width: 100% !important; }
  .page [style*="width: 880px; height: 495px"] { height: auto !important; aspect-ratio: 16 / 9; }
  .page img[style*="width: 880px; height: 495px"] { height: 100% !important; }
  .page [style*="white-space: nowrap"][style*="font-size: 24px"] { white-space: normal !important; }
  .page [style*="max-width: 720px"] { max-width: 100% !important; }

  /* ---------- Cap Sheet + League Dashboard tables: swipe sideways, team/player column stays put ---------- */
  .page div[style*="display: flex; gap: 36px"] { flex-direction: column; }
  .page div:has(> [style*="grid-template-columns: 1.55fr repeat(7"]) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page [style*="grid-template-columns: 1.55fr repeat(7"] { min-width: 940px; }
  .page [style*="grid-template-columns: 1.55fr repeat(7"]:not([style*="background"]) { background: #FBFAF6; }
  .page [style*="grid-template-columns: 1.55fr repeat(7"] > :first-child { position: sticky; left: 0; z-index: 2; background: inherit; box-shadow: 1px 0 0 rgba(0,0,0,0.12); }
  .page div:has(> [style*="minmax(0, 1.9fr) minmax(0, 1.9fr)"]) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page [style*="minmax(0, 1.9fr) minmax(0, 1.9fr)"] { min-width: 1080px; }

  /* Capsule slide controls: keep the counter on one line, drop the dot row */
  .page span[style*="font-size: 13px; color: #D4D2CC"] { white-space: nowrap; }
  .page div[style*="margin-left: auto; display: flex; gap: 6px"]:has(button[aria-label]) { display: none !important; }

  /* Tracker sub-menu: one swipeable line */
  .page > nav[aria-label="Trackers"] { height: auto !important; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 12px !important; }
  .page > nav[aria-label="Trackers"] > * { flex-shrink: 0; padding-top: 14px !important; padding-bottom: 14px !important; padding-left: 12px !important; padding-right: 12px !important; }

  /* Team Cap Sheet header */
  .page h1[style*="font-size: 62px"][style*="white-space: nowrap"] { white-space: normal !important; font-size: 44px !important; }
  .page span[style*="position: absolute"][style*="transform: translateX(-50%)"][style*="white-space: nowrap"] { display: none; }
  /* Primary menu never stacks */
  .page > header nav[aria-label="Primary"] { flex-direction: row !important; }

  .page [style*="minmax(0, 1.9fr) minmax(0, 1.9fr)"] > :first-child { position: sticky; left: 0; z-index: 2; background: inherit; box-shadow: 1px 0 0 rgba(0,0,0,0.12); }
  .page [style*="minmax(0, 1.9fr) minmax(0, 1.9fr)"]:not([style*="background"]) { background: #FBFAF6; }
  .page div:has(> select) { flex-wrap: wrap; }
  .page select { min-width: 0; max-width: 100%; }
}