/* ============================================================ Dr. Schamma Explains — global mobile hardening Linked LAST in every so it can override where needed. Desktop is untouched; everything here is a small-screen safety net. ============================================================ */ /* media never overflows the viewport */ img, svg, video, iframe, canvas { max-width: 100%; } html { overflow-x: hidden; } /* allow long words/URLs in copy to wrap instead of pushing the layout */ p, li, h1, h2, h3, .fact, .myth, .explain p { overflow-wrap: break-word; } /* ---------------- phones & small tablets ---------------- */ @media (max-width: 760px) { /* inner-page top bars (articles, guide, numbers, labs, shop…): wrap instead of overflowing, and shrink the buttons */ .bar-in, .nav-inner { flex-wrap: wrap; gap: 6px; } .bar-in > div, .nav-inner > div { flex-wrap: wrap; gap: 8px; } .bar-in .btn, .nav-inner .btn { padding: 9px 13px; font-size: .82rem; } /* wide tables scroll sideways instead of breaking the page */ table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* comfortable tap targets (~44px guidance) */ a.btn, button.btn, .seg, .toggle button, .langtoggle button, .ds-chip { min-height: 42px; } /* compact language toggle on phones so the nav fits one clean row */ .langtoggle::before { display: none !important; } .langtoggle button { padding: 8px 12px !important; font-size: .82rem !important; letter-spacing: 0 !important; } /* trim oversized vertical padding so content isn't buried in whitespace */ section { padding-top: 40px; padding-bottom: 40px; } /* interactive Labs: let controls breathe and wrap nicely */ .controls { gap: 8px; } .seg { font-size: .86rem; padding: 10px 13px; } .lab { padding: 16px; } /* the floating chat panel comfortably fits small screens */ #dsChat { right: 12px; left: 12px; width: auto; bottom: 86px; } #dsChatBtn { right: 16px; bottom: 16px; } } /* ---------------- very small phones ---------------- */ @media (max-width: 430px) { .hero h1 { line-height: 1.08; } .bar-in .btn, .nav-inner .btn { padding: 8px 12px; } }