/* tanimawoai.com on phones (founder, 2026-10-06: "make sure the website is fully responsive and look nice
   on phone. Remove anything unnecessary on phone version and keep them on desktop version").
   nginx adds this file to every page of tanimawoai.com with media="(max-width: 640px)", so computers and
   tablets never load it; the @media below is a second guard. Not used on app.tanimawoai.com (its own shell).
   "Hidden on phones" only hides; everything is still on the desktop site. Homepage-only rules use
   body:has(.hero-map) (the homepage is the only page with the map); older browsers simply keep everything.
   Measured on iPhone SE / 13 / 15 Pro Max sizes; the Code Lab has its own phone layout (playground-mobile.css). */
@media (max-width: 640px) {

  /* ---------- 1. Top of every page: more room for the content ---------- */
  /* "New website" bar: the red label goes, the message gets the whole width. */
  .beta-bar .beta-pill { display: none !important; }
  .beta-bar .beta-clip, .beta-bar .beta-rotator { flex: 1 1 auto; max-width: none; }
  /* Header: smaller logo (76px -> 52px), so the bar is about 70px instead of 94px. */
  header.nav a.logo, header.nav a.logo .logo-mark { width: 52px !important; height: 52px !important; background-size: contain !important; }
  header.nav .nav-inner { min-height: 0; padding-top: 6px; padding-bottom: 6px; }
  header.nav .nav-coffee { padding: 8px 14px; font-size: 0.9rem; min-height: 40px; }

  /* ---------- 2. Floating things that cover the page ---------- */
  /* The AI Assistant button stays, a little smaller; its "Questions about Sunday?" bubble goes
     (it covered the hero; the button itself opens the same chat). */
  #chatLauncher { width: 50px !important; height: 50px !important; }
  .chat-teaser { display: none !important; }
  /* Achievement pop-up: a slim strip at the bottom left, clear of the chat button. */
  .ach-toast { left: 10px !important; right: 72px !important; bottom: 12px !important; max-width: none !important;
    padding: 8px 12px !important; gap: 10px !important; border-radius: 14px !important; }
  .ach-toast * { font-size: 0.82rem !important; line-height: 1.25 !important; }
  .ach-toast svg, .ach-toast img, .ach-toast [class*="icon"] { width: 34px !important; height: 34px !important; min-width: 34px !important; }

  /* ---------- 3. Homepage: what a phone doesn't need ---------- */
  /* Map: keep the map and its "students · countries" count; the extras around it go
     (Watch us grow / sign-ups card on top of the map, 8px labels, legend, Find me, class-time ticker,
     find your country, list view / Country Cup / share card). */
  body:has(.hero-map) .hero-map .wow-ui,
  body:has(.hero-map) .hero-map .map-legend,
  body:has(.hero-map) .hero-map .mw-row,
  body:has(.hero-map) .hero-map .map-times,
  body:has(.hero-map) .hero-map .mh,
  body:has(.hero-map) .hero-map .map-label { display: none !important; }
  /* Stats: the big decorative "50,000+" circle goes; the stat cards stay. */
  body:has(.hero-map) .tb2-hero { display: none !important; }
  /* About teaser: first paragraph and "Learn With Dr. Tanimawo" stay (the About page has the full story). */
  body:has(.hero-map) #about:not(.page-first) p:not(:first-of-type) { display: none !important; }
  body:has(.hero-map) #about:not(.page-first) .btn-facebook,
  body:has(.hero-map) #about:not(.page-first) .btn-linkedin,
  body:has(.hero-map) #about:not(.page-first) .btn-foundation { display: none !important; }
  /* The next-class countdown is in the hero and in "Join the Next Class"; the copy in Next Live Class goes. */
  body:has(.hero-map) #schedule .countdown { display: none !important; }

  /* ---------- 4. Portrait of Dr. Daniel (homepage teaser and About page): smaller, so the text shows.
     Its three badges (PhD, 14+ years, Nova AI Ops) go on phones: the text right below says the same. ---------- */
  .about-photo-wrap { max-width: 180px !important; margin-left: auto !important; margin-right: auto !important; }
  .about-photo-wrap .badge-row { display: none !important; }
  .about-photo { max-width: 100% !important; height: auto !important; }

  /* ---------- 5. Footer: the large logo picture shrinks ---------- */
  .ftx-logo, .ftx-logo img { max-width: 140px !important; height: auto !important; }

  /* ---------- 6. Readable text and easy taps ---------- */
  .taa-link-pill { font-size: 11px !important; }
  main small, section small { font-size: max(11px, 0.85em); }
  .tool-link, .qt-all, .hiw-more, .map-fs-btn, .wow-grow-btn {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}