/* Theology Explorers • iPhone-first enhancements | preserves desktop experience */
:root{--phone-nav-h:65px}
html{scroll-padding-top:78px;-webkit-text-size-adjust:100%}
body{overflow-x:clip;overscroll-behavior-y:auto;-webkit-tap-highlight-color:transparent}
#app{min-height:100dvh}
img,svg,video,canvas{max-width:100%}
button,a,summary,select{touch-action:manipulation}
input,textarea,select{font-size:16px}
.phone-tabs{display:none}
.app-instructions{max-width:790px;margin:20px auto;background:#fff;border:1px solid #ece8e1;border-radius:22px;padding:30px 36px;box-shadow:0 15px 40px #1d283111}
.app-instructions ol{padding-left:25px;margin:24px 0}
.app-instructions li{padding-left:9px;margin-bottom:17px;line-height:1.65}
.app-instructions .app-icon-display{display:flex;align-items:center;gap:22px}
.app-instructions img{border-radius:20px;box-shadow:0 10px 25px #0002;flex-shrink:0}
.app-instructions h2{margin:0 0 8px}
/* Long URLs and source titles never force sideways page scrolling */
.article,.contentcard,.panel,.hist-art,.source-entry,.lab-surface,.lab-tile,.verse-reading,.free-verse-article{min-width:0;overflow-wrap:anywhere}
pre,code{overflow-wrap:anywhere}
@media (max-width:900px){
 .mobile-menu{background:#fff;box-shadow:0 16px 22px #0001;max-height:min(58dvh,460px);overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:12px 16px}
 .mobile-menu a{text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #eeebe7;border-radius:10px;padding:9px 6px;line-height:1.25}
 .readinglayout>*{min-width:0}
}
@media(max-width:700px){
 :root{--phone-nav-h:70px}
 .topbar{position:sticky;top:0;z-index:45;background:#fffdfa;box-shadow:0 1px 0 #e7e7e2}
 .navwrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(13px,env(safe-area-inset-right));min-height:62px;gap:6px}
 .brand{gap:7px;min-width:0;overflow:hidden}
 .brand strong{font-size:clamp(16px,4.4vw,20px);white-space:nowrap;letter-spacing:-.7px}
 .brand small{font-size:7px;letter-spacing:1.65px}
 .brand svg{width:21px;height:31px;flex-shrink:0}
 .navright{gap:3px}
 .navright .ghost{width:42px;height:44px;padding:9px;display:flex;justify-content:center;align-items:center}
 .navright .ghost svg{width:20px;height:20px}
 .menu-btn{display:none!important} /* More is in the bottom tab bar */
 .mobile-menu{position:fixed;z-index:48;left:10px;right:10px;bottom:calc(var(--phone-nav-h) + env(safe-area-inset-bottom) + 7px);top:auto;max-height:min(65dvh,520px);border:1px solid #dddcd5;box-shadow:0 15px 60px #101c2045;border-radius:17px;padding:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .mobile-menu a{background:#f9f8f4;font-size:13px;font-weight:650}
 .phone-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;z-index:47;bottom:0;left:0;right:0;height:calc(var(--phone-nav-h) + env(safe-area-inset-bottom));padding:4px max(9px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));background:#fffefa;border-top:1px solid #e7e4df;box-shadow:0 -3px 25px #1d2c3310}
 .phone-tab{background:transparent;border:0;color:#748080;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;min-height:55px;padding:3px 0;text-decoration:none;font:650 10px/1.1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;border-radius:10px}
 .phone-tab svg{width:23px;height:23px;max-height:23px}
 .phone-tab.selected{color:#8c6432;background:#f8f2e9}
 .phone-tab:focus-visible{outline:2px solid #59818a;outline-offset:-2px}
 main{min-width:0}
 .footer{margin-bottom:calc(var(--phone-nav-h) + env(safe-area-inset-bottom));padding-bottom:14px}
 .container{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .pagehero{padding-top:27px;padding-bottom:23px}
 .pagehero h1{font-size:clamp(34px,8.8vw,49px);line-height:1.1;letter-spacing:-1.1px}
 .pagehero p{font-size:15px;line-height:1.55}
 .breadcrumbs{overflow-wrap:anywhere}
 .hero{min-height:auto}
 .herogrid{min-height:0}
 .herocopy{padding:33px 0 50px}
 .herocopy h1{font-size:clamp(37px,10vw,52px);letter-spacing:-1.3px;line-height:1.06}
 .herocopy p{font-size:15px;line-height:1.6}
 .jesus-art{width:245px;height:285px;right:-66px;opacity:.13;pointer-events:none}
 .searchbar{gap:7px;padding:5px 6px 5px 10px}
 .searchbar .btn{padding:10px 12px;min-height:44px}
 .searchbar input{font-size:16px;width:100%;min-width:0}
 .tilegrid{gap:8px;padding:7px}
 .tile{min-height:148px;gap:4px;padding:13px 8px 14px}
 .tile .tile-icon svg{width:34px;height:34px}
 .tile .tile-icon{min-height:38px}
 .tile strong{font-size:14px}
 .tile > span:not(.tile-icon):not(.tile-arrow){font-size:11px;line-height:1.35}
 .tile-arrow{display:none}
 .homepanels{margin-top:22px;gap:13px;margin-bottom:42px}
 .panel{padding:17px!important}
 .imagewide{height:175px}
 .featuredlink{min-height:68px}
 .contentcard{padding:19px;min-height:0}
 .gridcards{gap:11px}
 .readinglayout{gap:12px}
 .sidenav{position:sticky;top:62px;z-index:20;border-radius:0 0 12px 12px;box-shadow:0 4px 12px #00000008;scrollbar-width:none;gap:12px}
 .sidenav::-webkit-scrollbar{display:none}
 .sidenav a{font-size:13px;padding:10px 2px;min-height:42px}
 .article{padding:24px 19px;border-radius:12px}
 .article>p,.article section>p{font-size:16px;line-height:1.79}
 .article h2{font-size:26px;line-height:1.18}
 .article section{scroll-margin-top:126px}
 .readingnote,.callout{padding:18px}
 .field,.filterrow select{width:100%;min-width:0;max-width:100%}
 .filterrow{display:grid;grid-template-columns:1fr;align-items:stretch}
 .filterrow>*{min-width:0}
 .compare-table,.facttable{max-width:100%}
 .compare-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
 .timeline{gap:10px}
 .timeitem details{min-width:0}
 .timeitem summary{padding:15px 13px;font-size:15px;line-height:1.35}
 .timeitem details p{padding:0 14px 16px}
 .timeitem{grid-template-columns:55px minmax(0,1fr);gap:6px}
 .timeitem::before{left:49px}
 .timeyear{font-size:10px;overflow-wrap:anywhere}
 .dialog-shade{padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
 .dialog{max-height:88dvh;overflow-y:auto;padding:24px 18px}
 .btn,.pill,select,button{min-height:44px}
 .chip{min-height:34px;padding:7px 10px}
 .lab-shell{padding-bottom:35px}
 .studio-hero h1{font-size:clamp(39px,10vw,56px)}
 .studio-hero-visual{min-height:250px}
 .lab-hero-actions{display:flex;flex-wrap:wrap}
 .lab-hero-actions .btn{flex:1 1 auto}
 .lab-card-grid{gap:10px}
 .lab-tile{padding:18px 15px;min-height:0}
 .lab-spotlight-grid>.lab-tile{min-height:0}
 .lab-surface{padding:20px 14px}
 .lab-section-heading{display:block}
 .sim-story,.sim-side,.knowledge-detail,.debate-round,.path-form,.path-preview,.verse-scripture,.verse-reading,.compare-lab-col{padding:18px}
 .timeline-row{padding:11px;gap:10px}
 .timeline-event{min-width:0}
 .knowledge-nodes{gap:7px}
 .knowledge-node{min-width:0;padding:9px 5px;overflow-wrap:anywhere}
 .trivia-theme{padding:18px}
 .app-instructions{padding:22px 17px;margin:8px auto 20px}
 .app-instructions .app-icon-display{align-items:flex-start;gap:13px}
 .app-instructions img{width:66px;height:66px;border-radius:15px}
 .app-instructions h2{font-size:23px}
 .gospel-hero{padding:43px 0 40px}
 .gospel-body{padding:27px 0 45px}
 .gospel-callout{padding:20px}
}
@media(max-width:350px){.brand strong{font-size:15px}.brand small{letter-spacing:1.2px}.navright .ghost{width:38px}.tile strong{font-size:13px}.phone-tab{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}