/* The phone app shares prayer data with the TV page, with its own layout. */
html[data-view=mobile]{scroll-padding-top:20px;scroll-padding-bottom:100px}
html[data-view=mobile] body{overflow-x:clip;background:#091d2c;padding-bottom:calc(80px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}
html[data-view=mobile] .mobile-only{display:block}
html[data-view=mobile] .desktop-title{display:none}
html[data-view=mobile] .tv-screen{height:auto;min-height:0;overflow:visible;background:radial-gradient(ellipse at 0 0,#28567545,transparent 70%)}
html[data-view=mobile] .tv-stage{position:static;left:auto;top:auto;transform:none;width:100%;height:auto;visibility:visible;max-width:540px;margin:auto}
html[data-view=mobile] .tv-stage .tv-content{display:flex;flex-direction:column;gap:18px;height:auto;padding:22px max(18px,env(safe-area-inset-left)) 24px;animation:none}
html[data-view=mobile] .tv-stage .tv-header{order:0;display:flex;flex-wrap:wrap;gap:17px;padding-bottom:3px;border:0}
html[data-view=mobile] .tv-stage .brand{gap:10px;align-items:center}
html[data-view=mobile] .tv-stage .prayer-signature{width:47px;height:48px}
html[data-view=mobile] .tv-stage .salah-mark{font-size:27px;text-decoration:none}
html[data-view=mobile] .tv-stage .eyebrow{font-size:10px;letter-spacing:.11em}
html[data-view=mobile] .tv-stage h1{font-size:28px;font-family:Georgia,serif;margin:4px 0 0}
html[data-view=mobile] .tv-stage .date{font-size:12px;text-align:left;width:100%;max-width:none;display:flex;justify-content:space-between;gap:10px;line-height:1.5;color:#9eafbe}
html[data-view=mobile] .tv-stage .hero{order:1;position:relative;display:block;padding:20px 21px;background:linear-gradient(120deg,#254459,#142e42);border:1px solid #a8bed326;border-radius:18px;box-shadow:0 8px 22px #0000000c}
html[data-view=mobile] .tv-stage .clock{position:absolute;top:20px;right:20px;font:14px Arial,sans-serif;letter-spacing:0;color:var(--muted);line-height:1}
html[data-view=mobile] .tv-stage .clock:before{content:'Nå ';font-size:11px;color:#a0b1bf}
html[data-view=mobile] .tv-stage .clock span{display:none}
html[data-view=mobile] .tv-stage .next{display:block;text-align:left;border:0;padding:0;max-width:100%}
html[data-view=mobile] .tv-stage .next .eyebrow{font-size:11px;letter-spacing:.09em;padding-right:100px}
html[data-view=mobile] .tv-stage .next h2{font-size:35px;line-height:1.2;margin:16px 0 9px;white-space:nowrap}
html[data-view=mobile] .tv-stage .countdown{font-size:15px;color:#d3dfe8;letter-spacing:.02em}
html[data-view=mobile] .tv-stage .mobile-section-heading{order:2;display:flex;align-items:center;justify-content:space-between;padding:7px 1px 0;margin-bottom:-6px}
html[data-view=mobile] .tv-stage .mobile-section-heading h2{font-size:18px;font-weight:400;margin:0}
html[data-view=mobile] .tv-stage .mobile-section-heading>span{font-size:12px;color:var(--muted)}
html[data-view=mobile] .tv-stage .cards{order:3;display:block;overflow:hidden;border:1px solid #ffffff17;border-radius:16px;background:#122b3d}
html[data-view=mobile] .tv-stage .card{display:grid;grid-template-columns:1fr auto;grid-template-areas:'name time' 'arabic time';align-items:center;gap:5px 16px;position:relative;border:0;border-bottom:1px solid #ffffff10;border-radius:0;padding:13px 17px;min-height:68px;background:none}
html[data-view=mobile] .tv-stage .card:last-child{border-bottom:0}
html[data-view=mobile] .tv-stage .card .name{grid-area:name;font-size:15px;color:#e4ebed}
html[data-view=mobile] .tv-stage .card .ar{grid-area:arabic;font-size:16px;line-height:1.1;color:#9fb1c1;margin:0}
html[data-view=mobile] .tv-stage .card .time{grid-area:time;font-size:27px;line-height:1;letter-spacing:-.02em;margin:0;color:#f1f0e6}
html[data-view=mobile] .tv-stage .card.active{box-shadow:inset 3px 0 0 var(--gold);background:linear-gradient(90deg,#d6b67516,transparent)}
html[data-view=mobile] .tv-stage .card.active:after{display:none}
html[data-view=mobile] .tv-stage .card.active .time{color:var(--gold)}
html[data-view=mobile] .tv-stage .card.active .name:after{content:'Neste';font:10px Arial,sans-serif;color:var(--gold);background:#d6b67519;border-radius:5px;padding:3px 6px;margin-left:9px;vertical-align:1px}
html[data-view=mobile] .tv-stage .jamaah{grid-column:1/-1;display:flex;justify-content:flex-start;gap:7px;border:0;padding:0;margin:4px 0 0;font-size:11px;line-height:1.1;color:#b3c4d1}
html[data-view=mobile] .tv-stage .tv-bottom{order:4;display:block;margin-top:-4px}
html[data-view=mobile] .tv-stage .tv-bottom>span,html[data-view=mobile] .tv-stage .tv-bottom>a{display:none}
html[data-view=mobile] .tv-stage .friday{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #d6b67538;border-radius:12px;padding:13px 17px;background:#d6b67507}
html[data-view=mobile] .tv-stage .friday h2{font:20px Georgia,serif;margin:0}
html[data-view=mobile] .tv-stage .friday strong{font:24px Arial,sans-serif;color:var(--gold)}
html[data-view=mobile] .tv-stage .solar-cycle{order:5;width:100%;height:255px;flex-shrink:0;padding:16px 12px 9px;border-radius:16px;background:#10283a;border-color:#ffffff17}
html[data-view=mobile] .tv-stage .solar-heading{height:48px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
html[data-view=mobile] .tv-stage .solar-heading h2{font:19px Georgia,serif;display:block;margin:0 0 5px}
html[data-view=mobile] .tv-stage .solar-heading>div>span{display:block;font-size:10px;line-height:1.5;max-width:142px}
html[data-view=mobile] .tv-stage .solar-controls{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
html[data-view=mobile] .tv-stage .solar-controls .solar-now{font-size:11px;min-width:0;max-width:none;line-height:1.4}
html[data-view=mobile] .tv-stage .solar-now:before{width:4px;height:4px;margin-right:5px;vertical-align:2px}
html[data-view=mobile] .tv-stage .solar-controls button{font-size:11px;min-height:34px;border:0;padding:5px 3px;color:var(--gold)}
html[data-view=mobile] .tv-stage .solar-chart{height:calc(100% - 48px)}
html[data-view=mobile] .tv-stage .solar-svg{overflow:visible}
html[data-view=mobile] .tv-stage .solar-prayer-name{font-size:13px}
html[data-view=mobile] .tv-stage .solar-prayer-time{font-size:12px}
html[data-view=mobile] .tv-stage .solar-horizon-label,html[data-view=mobile] .tv-stage .solar-rise-label,html[data-view=mobile] .tv-stage .solar-range-label{font:10px Arial,sans-serif;letter-spacing:0;fill:#9fb1c1}
html[data-view=mobile] .tv-stage .solar-prayer-point{stroke-width:1.4}
html[data-view=mobile] .tv-stage .solar-day-path{stroke-width:1.8}
html[data-view=mobile] .screen-controls,html[data-view=mobile] #wakeStatus{display:none}
html[data-view=mobile] .details{max-width:540px;margin:auto;padding:0 18px 20px;min-width:0}
html[data-view=mobile] .lower{display:block;min-width:0}
html[data-view=mobile] .lower>div{min-width:0;border:1px solid #ffffff17;border-radius:16px;padding:18px 14px;background:#10283a}
html[data-view=mobile] .section-head{align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}
html[data-view=mobile] .section-head h3{font-size:22px}
html[data-view=mobile] .section-head button{font-size:12px;min-height:44px;padding:10px}
html[data-view=mobile] .note{border:0;padding:26px 3px 0;font-size:13px;line-height:1.8}
html[data-view=mobile] .note h3{font-size:22px}
html[data-view=mobile] .scroll{overscroll-behavior-x:contain}
html[data-view=mobile] table{font-size:13px}
html[data-view=mobile] th,html[data-view=mobile] td{padding:12px 6px}
html[data-view=mobile] .tools button{font-size:13px;min-height:44px}
html[data-view=mobile] input[type=month]{font-size:16px;min-height:44px;max-width:100%}
html[data-view=mobile] #calendar{margin-top:25px}
html[data-view=mobile] footer{flex-direction:column;gap:12px;margin-top:25px;font-size:11px}
html[data-view=mobile] .error{position:static;margin:16px;font-size:16px}
html[data-view=mobile] .mobile-nav{display:flex;position:fixed;z-index:10;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:540px;justify-content:space-around;align-items:center;padding:9px 16px calc(9px + env(safe-area-inset-bottom));background:#0a2031f5;border-top:1px solid #ffffff15;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-view=mobile] .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:72px;min-height:46px;text-decoration:none;font-size:11px;color:#afbfcc;border-radius:10px}
html[data-view=mobile] .mobile-nav a:hover,html[data-view=mobile] .mobile-nav a:focus-visible{color:var(--gold);background:#d6b6750c}
html[data-view=mobile] .mobile-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:360px){
 html[data-view=mobile] .tv-stage .tv-content{padding-left:14px;padding-right:14px}
 html[data-view=mobile] .tv-stage .next h2{font-size:31px}
 html[data-view=mobile] .tv-stage .solar-heading h2{font-size:17px}
 html[data-view=mobile] .tv-stage .solar-heading>div>span{max-width:125px}
}
html[data-view=mobile] .tv-stage .date{display:block;text-align:right;line-height:1.65}
html[data-view=mobile] .tv-stage #hijriDate{font-size:12px}
html[data-view=mobile] .tv-stage .solar-prayer-name{font-size:12px}
html[data-view=mobile] .tv-stage .solar-prayer-time{font-size:12px}
html[data-view=mobile] .tv-stage .solar-heading{height:43px}
html[data-view=mobile] .tv-stage .solar-chart{height:calc(100% - 43px)}
html[data-view=mobile] .calculation-info{font-size:13px;padding:12px 15px;margin-top:18px;background:#10283a}
html[data-view=mobile] .calculation-info>summary{font-size:14px;min-height:24px;line-height:24px}
html[data-view=mobile] .calculation-info .note{padding:12px 0 0}

html[data-view=mobile] .tv-stage .solar-sunrise-name{font-size:11px}