/* ===== Telvix: fit-all-screens layer =====
   Link this LAST in <head> of every page (after any <style> block):
   <link rel="stylesheet" href="responsive.css">
*/

/* 1. No sideways scrolling, no tiny-text surprises, no black bars */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#011a14}
html,body{width:100%;min-height:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
input,button,select,textarea{max-width:100%}

/* 2. App column: full width on phones, neat centred column on bigger screens */
.app{width:100%;max-width:100%;margin-inline:auto;min-height:100vh;min-height:100dvh}
@media (min-width:600px){.app{max-width:520px}}
@media (min-width:1024px){.app{max-width:560px}}

/* 3. Fixed bars (bottom nav, chat bubble, toasts) must follow the app width */
.err-bar{max-width:min(410px,calc(100% - 32px))}

/* 4. Small phones (320 to 380px wide) */
@media (max-width:380px){
  .hero-top{padding-left:14px;padding-right:14px;padding-bottom:56px}
  .card{padding-left:14px;padding-right:14px}
  .brand-mark{width:46px;height:46px;font-size:20px}
  .brand h1{font-size:18px}
  .brand p{font-size:9px}
  .medal{width:68px;height:68px}
  .hero-chips{gap:6px}
  .hero-chips span{font-size:10px;padding:6px 9px}
  .panel h2{font-size:22px}
  .panel .sub{font-size:12.5px}
  .box{height:52px;padding:0 12px;gap:8px}
  .box input{font-size:15px}
  .box .pre{font-size:14px;padding-right:9px}
  .cta{height:54px;font-size:15.5px}
  .cta-outline{height:52px;font-size:15px}
  .tabs button{font-size:13.5px;padding:12px 0}
  .btn-social{font-size:13px;gap:6px}
  .wl-card,.sheet{padding-left:16px;padding-right:16px}
}

/* 5. Very small or landscape screens: shrink the loading splash so nothing is cut off */
@media (max-height:620px){
  .splash{padding:12px}
  .sp-logo{width:92px;height:92px;margin-bottom:14px}
  .sp-mark{width:54px;height:54px;font-size:26px;border-radius:16px}
  .sp-mark img{border-radius:14px}
  .sp-title{font-size:24px}
  .sp-title span{font-size:16px}
  .sp-bar{margin-top:20px}
}

/* 6. Short screens: let modals scroll instead of overflowing */
@media (max-height:700px){
  .wl-card{margin-top:24px}
  .sheet{margin-top:70px}
}

/* 7. Tablets and desktop: soft frame around the app column */
@media (min-width:600px){
  .app{box-shadow:0 0 0 1px rgba(250,204,21,.18),0 0 60px rgba(0,0,0,.45)}
}

/* 8. Phones with notches or gesture bars */
.err-bar{bottom:calc(16px + env(safe-area-inset-bottom,0px))}