/* Athar 4.2.2 — Today visual-fidelity corrections. All tracking behavior is inherited untouched. */
/* Use app-supplied theme colors: dark is navy-charcoal, selected accent is independent. */
body[data-theme='dark']:has(#view-today.active) {
  background: color-mix(in srgb, var(--bg) 70%, #020912);
}
body[data-theme='oled']:has(#view-today.active){background:var(--bg)}
#view-today { --athar-today-bg:color-mix(in srgb,var(--bg) 72%,#020b14); overflow-x:clip; }
body[data-theme='light'] #view-today{--athar-today-bg:var(--bg)}
body[data-theme='oled'] #view-today{--athar-today-bg:var(--bg)}
/* Mosque and moon: feather edges so the photo is part of the screen rather than a hard-edged rectangle. */
#view-today .athar-sky{
 left:-22px; right:-22px; top:-45px; height:273px;
 opacity:.93; filter:hue-rotate(var(--athar-hue-shift,0deg)) saturate(.90);
 background-image:url('./athar-mosque-reference.png');
 background-size:100% auto; background-position:center top; background-repeat:no-repeat;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 70%,transparent 99%);
 mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 70%,transparent 99%);
}
#view-today .athar-today-top::before{
 content:"";position:absolute;z-index:-2;left:-22px;right:-22px;top:-46px;height:290px;pointer-events:none;
 background:radial-gradient(ellipse 44% 58% at 89% 34%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 94%);
}
body[data-theme='light'] #view-today .athar-sky{opacity:.18;filter:grayscale(.6) hue-rotate(var(--athar-hue-shift,0deg))}
body[data-theme='oled'] #view-today .athar-sky{opacity:.7}
/* Header structure and gestures remain unchanged. */
#view-today .today-hijri-top{font-size:13px!important;font-weight:450!important;letter-spacing:.55px!important;margin-bottom:11px!important;color:var(--text)}
#view-today .today-heading{margin:0 0 10px!important;min-height:40px!important}
#view-today .today-heading .page-title{font-size:clamp(37px,10.25vw,45px)!important;letter-spacing:-1.6px!important;font-weight:750!important}
#view-today .athar-date-controls{height:39px!important;background:color-mix(in srgb,var(--athar-today-bg) 82%,transparent)!important;border-color:color-mix(in srgb,var(--text) 13%,transparent)!important}
#view-today .athar-date-arrow{height:37px!important;color:var(--text)!important}
#view-today .athar-miladi-date{height:37px!important;font-weight:650!important;color:var(--accent)!important;border-color:color-mix(in srgb,var(--text) 12%,transparent)!important;background:color-mix(in srgb,var(--bg) 73%,transparent)!important}
#view-today .today-subrow{margin-top:17px!important;padding-bottom:11px!important;font-size:14px!important;font-weight:630!important;color:var(--text)!important}
/* Hero: hollow gray ring, tiny accent at 0%, dark charcoal core, restrained gold corner glow. */
#view-today .athar-prayer-hero{
 margin:10px 0 17px!important;min-height:122px!important;padding:12px!important;border-radius:22px!important;overflow:hidden!important;
 background: radial-gradient(ellipse 36% 64% at 96% 1%,color-mix(in srgb,var(--accent) 29%, transparent),transparent 87%),
 linear-gradient(112deg,color-mix(in srgb,var(--athar-today-bg) 91%, #0c1620) 2%,color-mix(in srgb,var(--athar-today-bg) 87%, #18232a) 100%)!important;
 border:1px solid color-mix(in srgb,var(--text) 18%,transparent)!important;
 border-right-color:color-mix(in srgb,var(--accent) 43%,transparent)!important;
 box-shadow:inset 0 1px color-mix(in srgb,var(--text) 3%,transparent)!important;
}
#view-today .athar-prayer-hero::before{content:"";position:absolute;z-index:0;inset:0 0 0 auto;width:39%;height:100%;background:url('./athar-card-landscape.png') right center/100% 100% no-repeat;pointer-events:none;opacity:.44}
#view-today .athar-prayer-hero::after{display:none!important}
#view-today .athar-prayer-hero .hero-content{position:relative;z-index:1;min-height:116px!important;padding:3px 6px!important;grid-template-columns:minmax(89px,1fr) 1px minmax(130px,1.6fr)!important;gap:clamp(11px,3.8vw,20px)!important}
#view-today .athar-prayer-hero .ring{
 width:100px!important;height:100px!important;box-shadow:none!important;border:0!important;border-radius:50%!important;
 background:conic-gradient(from -11deg,var(--accent) 0 max(5.5%, calc(var(--pct)*1%)), color-mix(in srgb,var(--text) 19%,#303944) 0)!important;
}
#view-today .athar-prayer-hero .ring::before{
 content:""!important;position:absolute!important;inset:8px!important;top:8px!important;left:8px!important;width:auto!important;height:auto!important;
 border-radius:50%!important;transform:none!important;background:color-mix(in srgb,var(--athar-today-bg) 94%,#030911)!important;z-index:1!important;
}
#view-today .athar-prayer-hero .ring-inner{position:relative;z-index:3}
#view-today .athar-prayer-hero .ring strong{font-size:18px!important;font-weight:720!important}
#view-today .athar-hero-label{font-size:11px!important;letter-spacing:1.4px!important;color:var(--muted)!important;font-weight:650!important;margin-bottom:8px!important}
#view-today .athar-prayer-hero .hero-amount{font-size:clamp(32px,8.5vw,41px)!important;letter-spacing:-1.2px!important}
#view-today .athar-prayer-hero .athar-hero-divider{background:color-mix(in srgb,var(--muted) 28%,transparent)!important;height:85%!important}
/* Prayer rows: match reference proportions and left-hand identity grouping. */
#view-today .prayer-stack{gap:8px!important}
#view-today .athar-prayer-row{
 height:56px!important;min-height:56px!important;padding:7px 13px!important;gap:9px!important;border-radius:20px!important;
 background:linear-gradient(125deg,color-mix(in srgb,var(--athar-today-bg) 92%,#151e25),color-mix(in srgb,var(--athar-today-bg) 93%,#17212a))!important;
 border:1px solid color-mix(in srgb,var(--text) 12%,transparent)!important;box-shadow:none!important;
}
#view-today .athar-prayer-identity{gap:10px!important}
#view-today .athar-prayer-symbol{width:37px!important;height:37px!important;flex-basis:37px!important;background:color-mix(in srgb,var(--accent) 13%,transparent)!important}
#view-today .athar-symbol-3{background:rgba(241,133,83,.16)!important}
#view-today .athar-symbol-4{background:rgba(131,129,221,.19)!important}
#view-today .athar-prayer-symbol svg{width:25px!important;height:25px!important;stroke-width:2px!important}
#view-today .athar-prayer-divider{height:19px!important;background:color-mix(in srgb,var(--text) 16%,transparent)!important}
#view-today .athar-prayer-identity .prayer-name{font-size:clamp(15px,4.1vw,18px)!important;color:var(--accent-legible)!important;font-weight:700!important;white-space:nowrap}
#view-today .status-switch{gap:8px!important}
#view-today .status-switch .state-btn{width:29px!important;height:29px!important;min-width:29px!important;flex-basis:29px!important;border-color:color-mix(in srgb,var(--muted) 40%,transparent)!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important}
#view-today .status-switch .state-btn svg{width:17px!important;height:17px!important}
#view-today .status-switch .state-btn[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 20%,transparent)!important;border-color:var(--accent)!important;color:var(--accent-legible)!important}
#view-today .status-switch .state-btn.late[aria-pressed="true"]{background:color-mix(in srgb,var(--bad) 22%,transparent)!important;border-color:var(--bad)!important;color:var(--bad)!important}
/* Reproduce the original neutral charcoal floating dock; never apply a permanent blue tint. */
body[data-theme='dark'] .glass-nav, body[data-theme='oled'] .glass-nav{
 background:rgba(7,15,24,.83)!important;border:1px solid rgba(170,175,182,.17)!important;
 box-shadow:none!important;filter:none!important;
}
body[data-theme='dark'] .glass-nav .nav-glider,body[data-theme='oled'] .glass-nav .nav-glider{
 background:rgba(120,121,126,.24)!important;border:1px solid rgba(174,174,180,.16)!important;box-shadow:none!important;
}
.glass-nav .tab-icon svg{width:25px!important;height:25px!important;max-width:27px!important;max-height:27px!important}
/* Bottom safe-area spacing: reference keeps a modest gap after the five prayers. */
body:has(#view-today.active) .glass-nav,body:has(#view-today.active) .glass-nav.compact{bottom:calc(env(safe-area-inset-bottom) + 47px)!important}
@media(max-width:375px){
 #view-today .athar-prayer-hero .hero-content{grid-template-columns:minmax(76px,1fr) 1px minmax(130px,1.65fr)!important;gap:9px!important}
 #view-today .athar-prayer-hero .ring{width:85px!important;height:85px!important}
 #view-today .athar-prayer-row{height:54px!important;min-height:54px!important;padding:6px 9px!important;gap:6px!important}
 #view-today .athar-prayer-identity{gap:6px!important}
 #view-today .athar-prayer-symbol{width:31px!important;height:31px!important;flex-basis:31px!important}
 #view-today .athar-prayer-symbol svg{width:22px!important;height:22px!important}
 #view-today .status-switch{gap:5px!important}
 #view-today .status-switch .state-btn{width:26px!important;height:26px!important;min-width:26px!important;flex-basis:26px!important}
 #view-today .status-switch .state-btn svg{width:15px!important;height:15px!important}
}
@media(max-width:340px){
 #view-today .athar-miladi-date{padding:0 6px!important;font-size:10px!important}
 #view-today .athar-date-arrow{width:27px!important;flex-basis:27px!important}
 #view-today .athar-prayer-identity .prayer-name{font-size:14px!important}
 #view-today .status-switch{gap:3px!important}
 #view-today .athar-prayer-hero .hero-content{grid-template-columns:minmax(70px,1fr) 1px minmax(115px,1.6fr)!important;gap:8px!important}
 #view-today .athar-prayer-hero .ring{width:78px!important;height:78px!important}
 #view-today .athar-hero-label{font-size:9px!important;letter-spacing:.8px!important}
}
/* Final measurement pass: reference header-to-card position, 129px progress panel, 61px row rhythm. */
#view-today .today-hijri-top{margin-bottom:6px!important}
#view-today .today-heading{margin-bottom:4px!important;min-height:38px!important}
#view-today .today-subrow{margin-top:10px!important;padding-bottom:7px!important}
#view-today .athar-prayer-hero{min-height:127px!important;padding:7px!important;
 background:radial-gradient(ellipse 30% 52% at 98% 0%,color-mix(in srgb,var(--accent) 27%,transparent),transparent 86%),
 linear-gradient(112deg,color-mix(in srgb,var(--athar-today-bg) 93%,#0a121c) 2%,color-mix(in srgb,var(--athar-today-bg) 93%,#17232a) 100%)!important;}
#view-today .athar-prayer-hero::before{opacity:.32}
#view-today .athar-prayer-hero .hero-content{min-height:111px!important;padding:1px 6px!important}
#view-today .prayer-stack{gap:5px!important}

/* Keep the imported landscape/adornments compatible with any chosen accent and light appearance. */
#view-today .athar-prayer-hero::before{filter:hue-rotate(var(--athar-hue-shift,0deg))}
body[data-theme='light'] #view-today .athar-prayer-hero::before{opacity:.10}
body[data-theme='oled'] #view-today .athar-prayer-hero::before{opacity:.24}
@media(max-height:750px){body:has(#view-today.active) .glass-nav,body:has(#view-today.active) .glass-nav.compact{bottom:calc(env(safe-area-inset-bottom) + 8px)!important}}

/* Contrast-safe accent text in custom themes, without altering decorative accent background colors. */
#view-today .athar-miladi-date, #view-today .athar-prayer-identity .prayer-name, #view-today .athar-worship-mark, #view-today .athar-prayer-symbol {color:var(--today-contrast-accent,var(--accent))!important}
#view-today .athar-worship-mark svg{stroke:var(--today-contrast-accent,var(--accent))!important}
#view-today .athar-symbol-3{color:#fc955c!important}
#view-today .athar-symbol-4{color:#a6a0ff!important}
#view-today .status-switch .state-btn[aria-pressed="true"]{color:var(--today-contrast-accent,var(--accent))!important}
#view-today .status-switch .state-btn.late[aria-pressed="true"]{color:var(--bad)!important}