/* data.influencers.club - phone/tablet layer (2026-10-14).
   Every rule sits inside a max-width media query, so desktop renders exactly as before.
   The pages use inline styles, so these rules target them by attribute and need !important. */

/* ============ Home page: sidebar shell (aside + main) ============ */
@media (max-width: 860px) {
  #ic-topbar {
    display: flex !important; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 12px 0 16px;
    background: #fff; border-bottom: 1px solid #DDE3EA; z-index: 20;
  }
  #ic-topbar a { display: flex; align-items: center; }
  #ic-topbar button {
    width: 40px; height: 40px; border: 1px solid #DDE3EA; border-radius: 10px;
    background: #fff; color: #0C1826; font-size: 20px; line-height: 1; cursor: pointer;
  }
  aside {
    width: min(300px, 85vw) !important; z-index: 30 !important;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.ic-nav-open aside { transform: none; }
  body.ic-nav-open { overflow: hidden; }
  body.ic-nav-open::before { content: ''; position: fixed; inset: 0; background: rgba(12, 24, 38, .4); z-index: 25; }
  main { margin-left: 0 !important; flex-basis: 100% !important; }
  main > section { padding: 76px 16px 0 !important; gap: 32px !important; }
  main [style*="padding: 52px 44px 56px"] { padding: 28px 20px 32px !important; gap: 24px !important; }
  main [style*="grid-template-columns: 1fr 1fr 1fr"] { flex: 1 1 100% !important; }
  main [style*="grid-template-columns: 1fr 1fr 1fr"] > div { padding: 12px !important; }
  main [style*="minmax(290px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)) !important; }
  main [style*="minmax(280px"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
  main [style*="grid-template-columns: 40px"] { grid-template-columns: 32px minmax(0, 1fr) !important; column-gap: 14px !important; }
  main [style*="grid-template-columns: 40px"] > :nth-child(3) { grid-column: 2; justify-self: start; }
}

/* ============ Feature and data-point pages (body > section) ============ */
@media (max-width: 860px) {
  /* Long URLs, handles and emails: wrap instead of pushing the page sideways (works on every browser) */
  body > section [style*="IBM Plex Mono"] { overflow-wrap: anywhere; }
  /* Safety net on newer browsers (Safari 16+, Chrome 90+): nothing can cause sideways scroll */
  html, body { overflow-x: clip; }
  body > section { padding: 20px 16px 0 !important; gap: 40px !important; }
  /* Hero: text and illustration stack instead of sitting side by side */
  body > section header[style*="padding:52px 44px"] { padding: 28px 20px !important; }
  body > section header[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  /* Email "fills across platforms" chips: badge and check on top, address full width below */
  body > section [style*="display:flex; align-items:center; gap:12px"]:has(> [style*="flex:1; display:flex; flex-direction:column; min-width:0"]) { flex-wrap: wrap; row-gap: 8px; }
  body > section [style*="display:flex; align-items:center; gap:12px"]:has(> [style*="flex:1; display:flex; flex-direction:column; min-width:0"]) > [style*="flex:1; display:flex; flex-direction:column; min-width:0"] { order: 3; flex-basis: 100% !important; }
  body > section [style*="display:flex; align-items:center; gap:12px"]:has(> [style*="flex:1; display:flex; flex-direction:column; min-width:0"]) > span:last-child { margin-left: auto; }
  /* Auto-fit card grids: never ask for a column wider than the screen */
  body > section [style*="minmax(300px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; }
  body > section [style*="minmax(290px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)) !important; }
  body > section [style*="minmax(280px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
  body > section [style*="minmax(270px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)) !important; }
  body > section [style*="minmax(260px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }
  body > section [style*="minmax(250px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important; }
  body > section [style*="minmax(240px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; }
  body > section [style*="minmax(230px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important; }
  body > section [style*="minmax(220px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; }
  body > section [style*="minmax(210px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important; }
  body > section [style*="minmax(200px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important; }
}

@media (max-width: 600px) {
  /* Big cards: less padding so content gets the width */
  body > section [style*="padding:30px"] { padding: 20px !important; }
  body > section [style*="padding:26px"] { padding: 20px !important; }
  body > section [style*="padding:24px 26px"],
  body > section [style*="padding:22px 24px"],
  body > section [style*="padding:22px 26px"] { padding: 20px 18px !important; }
  /* Section intros indented under the big number: drop the indent */
  body > section [style*="padding-left:54px"] { padding-left: 0 !important; }
  body > section [style*="padding:4px 0 0 54px"] { padding: 4px 0 0 !important; }

  /* Flow diagrams (A -> B, A -> B -> C): stack vertically, arrows point down */
  body > section [style*="grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important; justify-items: stretch;
  }
  body > section [style*="grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)"] > span,
  body > section [style*="grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)"] > div > span:first-child[style^="font-size:2"][style*="line-height:1"] {
    display: inline-block; justify-self: center; transform: rotate(90deg);
  }

  /* Vertical "Classifier" divider between two stacked boxes: lay it flat */
  body > section [style*="grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)"] > div[style*="flex-direction:column; align-items:center; justify-content:center"] { flex-direction: row !important; }
  body > section [style*="grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)"] > div > span[style*="width:1px"] {
    width: auto !important; height: 1px; align-self: center;
    background: linear-gradient(90deg, #DDE3EA 50%, transparent 0) 0 0 / 8px 1px repeat-x !important;
  }
  body > section [style*="grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)"] > div > span[style*="writing-mode:vertical-rl"] { writing-mode: horizontal-tb !important; transform: none !important; }

  /* Big stat words ("Engagers") in two-up stat cards: smaller so they stay inside the card */
  body > section [style*="minmax(180px, 1fr)"] span[style*="font-size:34px"] { font-size: 28px !important; }

  /* Dot illustrations: keep the dots small once their card goes full width */
  body > section [style*="grid-template-columns:repeat(6, 1fr)"] { max-width: 210px; }

  /* Label | bar | value rows: shrink the fixed label column */
  body > section [style*="grid-template-columns:200px minmax(0,1fr)"],
  body > section [style*="grid-template-columns:170px minmax(0,1fr)"],
  body > section [style*="grid-template-columns:140px minmax(0,1fr)"],
  body > section [style*="grid-template-columns:120px minmax(0,1fr)"],
  body > section [style*="grid-template-columns:110px minmax(0,1fr)"],
  body > section [style*="grid-template-columns:100px minmax(0,1fr)"],
  body > section [style*="grid-template-columns:96px minmax(0,1fr)"] {
    grid-template-columns: minmax(0, 40%) minmax(40px, 1fr) auto !important; gap: 10px !important;
  }

  /* Checklist rows (mark | field | note): note drops under the field */
  body > section [style*="grid-template-columns:auto 150px minmax(0,1fr)"] {
    grid-template-columns: auto minmax(0, 1fr) !important; row-gap: 2px !important;
  }
  body > section [style*="grid-template-columns:auto 150px minmax(0,1fr)"] > :nth-child(3) { grid-column: 2; }
  /* Same for list rows whose last column is a sentence (email checks, AI Search verdicts, CQI signals) */
  body > section [style^="display:grid; grid-template-columns:auto minmax(0,1fr) auto;"] {
    grid-template-columns: auto minmax(0, 1fr) !important; row-gap: 2px !important;
  }
  body > section [style^="display:grid; grid-template-columns:auto minmax(0,1fr) auto;"] > :nth-child(3) { grid-column: 2; }
  body > section [style^="display:grid; grid-template-columns:auto minmax(0,1fr) auto;"] > [style*="IBM Plex Mono"] { font-size: 12.5px !important; }
  /* Hashtag rows (rank | tag | uses | when): uses and when stack on the right */
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto auto"] {
    grid-template-columns: auto minmax(0, 1fr) auto !important; row-gap: 0 !important;
  }
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto auto"] > :nth-child(-n+2) { grid-row: span 2; }
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto auto"] > :nth-child(3) { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; }
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto auto"] > :nth-child(4) { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; }

  /* Example chips with a URL/email and a tag: let the tag wrap below */
  body > section [style*="justify-content:space-between"][style*="display:flex"] { flex-wrap: wrap; row-gap: 6px; }
  /* URLs, handles, emails, code: allowed to shrink inside flex rows */
  body > section [style*="IBM Plex Mono"] { min-width: 0; }

  /* Tables: tighter cells, and scroll sideways inside their card if still too wide */
  body > section div:has(> table) { overflow-x: auto !important; }
  body > section table th, body > section table td { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (max-width: 400px) {
  /* Small phones: ranked list cards (rank | details | score) put the score under the details */
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto;"] { grid-template-columns: auto minmax(0, 1fr) !important; row-gap: 4px !important; }
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto;"] > :nth-child(3) { grid-column: 2; justify-self: start; }
  /* Hashtag rows: uses and when go under the tag too */
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto auto"] { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 14px !important; }
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto auto"] > :nth-child(-n+2) { grid-row: auto; }
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto auto"] > :nth-child(3),
  body > section [style*="grid-template-columns:auto minmax(0,1fr) auto auto"] > :nth-child(4) { grid-column: 2; grid-row: auto; justify-self: start; }
  body > section table th, body > section table td { padding-left: 10px !important; padding-right: 10px !important; }
  body > section table { font-size: 13px !important; }
}