/* ===== Phones and small tablets (v3.54.73) =====
   Loaded with media="(max-width:820px)" in templates/index.html, so a computer screen never applies
   any of it. Owner: "very difficult to read anything, even check a stock symbol".
   Measured cause: the one-row top bar (logo, Back, a 230px-minimum search box, four badges) was 576px
   wide, so a 390px phone laid the whole site out at 576px and shrank it to fit: every word about a
   third smaller than intended. Fixes here: a two-row top bar with a full-width search, the page
   scrolls as one (the header scrolls away instead of staying pinned), menus open on tap as full-width
   panels, inputs at 16px (iPhones zoom into smaller ones), and wide content scrolls inside its card. */

/* --- the page scrolls as one document; nothing pinned eats the screen --- */
html,body{height:auto;min-height:100%}
body{display:block;overflow-x:hidden}
.layout{display:block}
.main{height:auto;overflow:visible;padding:12px 12px 24px}

/* --- top bar: row 1 logo, back, account, theme; row 2 a full-width search --- */
.topbar{flex-wrap:wrap;gap:8px 8px;padding:10px 12px 10px}
.brand{order:1;flex:1 1 auto;min-width:0}
.brand .wordmark{font-size:20px}
.brand .logo{width:30px;height:30px}
.backbtn{order:2;padding:7px 10px;font-size:14px}
.backbtn:disabled{display:none}
.status{order:3;flex:none;flex-wrap:nowrap;gap:6px;margin-left:0}
#providerBadge,.status .ver{display:none}
.status .badge{padding:7px 11px;font-size:14px}
.searchwrap{order:4;flex:1 1 100%;max-width:none;min-width:0}
.searchwrap input{font-size:16px;padding:12px 14px;border-radius:12px}
.searchdrop{left:0;right:0;width:auto;top:52px;max-height:60vh;overflow-y:auto}
.searchdrop .row{padding:12px 14px;font-size:15px}

/* --- menus: one swipeable row of buttons; a tapped menu opens full width below it --- */
.mainnav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:6px 8px;gap:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mainnav::-webkit-scrollbar{display:none}
.mainnav .navtop{flex:none;font-size:15px;padding:9px 13px}
html[data-fsize="large"] .mainnav .navtop,html[data-fsize="xl"] .mainnav .navtop{font-size:16px}
.navgrp:hover .navmenu,.navgrp:focus-within .navmenu{display:none}
.navgrp.mopen .navmenu{display:block !important;position:fixed;left:8px;right:8px;top:var(--navmenu-top,120px);min-width:0;
  max-height:calc(100vh - var(--navmenu-top,120px) - 12px);overflow-y:auto;z-index:70}
.navgrp.mopen>.navhead{color:var(--nav-ink-hover);background:var(--nav-hover-bg)}
.navmenu button{padding:12px 10px}
.navmenu .mt b{font-size:15px}
.navscrim{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.35)}

/* --- the side rail stays off-canvas (app.css); its lists show on the home page instead --- */
.homerailm{display:block}
.homerailm .railpulse{border-top:0;overflow:visible}
.homerailm .railbody{padding:0}
.homerailm .mvl small{max-width:none}
.homerailm .railsecs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:560px){.homerailm .railsecs{grid-template-columns:1fr}}

/* --- reading comfort on cards and text --- */
.card{padding:14px;border-radius:14px}
.fgh{font-size:14px}
.odim{line-height:1.5}
.btn{min-height:40px}
input,select,textarea{font-size:16px}
.tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{font-size:14px}
img,svg,video,canvas{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}

/* --- home --- */
.homehero2{padding:16px 14px 14px;border-radius:16px}
.homehero2 .hgreet{font-size:22px}
.hh-top{gap:10px}
.heroact{width:100%;display:flex;gap:8px}
.heroact .btn{flex:1 1 0;justify-content:center}
.hsub{font-size:14px;line-height:1.8}
.hbrief{padding:10px 12px}
.hbrief .briefrow{flex-direction:column;align-items:stretch}
.hbrief .btn{width:100%}
.hband{gap:8px 18px;padding:12px 14px}
.hband b{font-size:18px}
.hband span{font-size:13px}
.hdesks{grid-template-columns:repeat(2,minmax(0,1fr))}
.glance{grid-template-columns:repeat(2,minmax(0,1fr))}
.grates{grid-template-columns:repeat(2,minmax(0,1fr))}
.hlthrow{grid-template-columns:1fr}
.homerow{grid-template-columns:1fr}
.dailyrow{grid-template-columns:1fr}
.featrow{grid-template-columns:1fr}
.taskgrid{grid-template-columns:1fr}
.hnfoot{flex-direction:column;align-items:stretch;gap:8px}
.hnfoot .btn{width:100%}

/* --- splash: fits the screen, buttons full width --- */
.spl-inner{padding:20px 16px}
.spl-cta{flex-direction:column;align-items:stretch;gap:10px}
.spl-cta button{width:100%}

/* --- stock page and other views: headers wrap, wide pieces scroll inside their card --- */
.phead{flex-wrap:wrap;gap:8px}
.phead h2{font-size:20px}
.symhead,.chartbar{flex-wrap:wrap;gap:8px}
.ranges,.tabbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;max-width:100%}
.ranges::-webkit-scrollbar,.tabbar::-webkit-scrollbar{display:none}
.ranges button,.tabbar button{flex:none;min-height:36px}
.globaldisc{font-size:13px;line-height:1.55}

/* --- fixes after the first phone screenshots --- */
.hbrief .brieftxt{flex:none}
/* row 1 stays one row: the Back button shrinks to an arrow, the wordmark may shorten */
.brand{overflow:hidden}
.backbtn{font-size:0;padding:6px 12px;line-height:1}
.backbtn::before{content:"←";font-size:18px}
@media (max-width:400px){.brand .wordmark{font-size:18px}.status .badge{padding:7px 9px}}
/* chart controls: the overlay and study rows scroll sideways inside the card */
.overlays{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:none}
.overlays::-webkit-scrollbar{display:none}
.overlays button{flex:none}
#btnAddWatch{margin-left:0 !important}
/* grids whose minimum column is wider than a phone (Best Buys 430px, security tools, business goals) */
.pickgrid,.sectools,.bizgoals{grid-template-columns:1fr}
/* long in-text links may wrap (one on the Export page pushed the page to 411px) */
.lnav{white-space:normal}
/* Start a Business (v3.54.74) */
.bz-band{margin:-14px -14px 12px;height:120px}
.bz-mini{width:88px}
.bz-side-h h4{font-size:16px}
.bz-tiles{grid-template-columns:1fr}
.bz-tile{flex-direction:row}
.bz-tile-art{flex:none;width:118px;aspect-ratio:auto}
.bz-libtile .bz-tile-art{flex:0 0 96px;width:96px}