/* ATHAR 4.2.5 — TODAY LAYOUT RESTORATION
   Only appearance and Today-page geometry. The older full-size prayer rows
   define the proportions; approved date arrows, mosque art, motifs and functions remain.
   This replaces the conflicting compressed/dark-gold 4.2.3–4.2.4 overrides. */

/* Allow the artwork to reach the viewport edge rather than being clipped to the inner 22px page margin. */
#view-today{overflow-x:visible!important}

/* Keep the tested iPhone status-area formula; do not add another 53px inset. */
.app-shell:has(#view-today.active){padding-top:max(env(safe-area-inset-top),13.5vw)!important}

/* Respect user-selected theme/background instead of turning Today pitch-black. */
body[data-theme='dark']:has(#view-today.active){background:var(--bg)!important}
body[data-theme='dark'] #view-today{--athar-today-bg:var(--bg)}
body[data-theme='oled'] #view-today{--athar-today-bg:var(--bg)}

/* Restore the approved mosque asset to the upper-right header with a natural fade.
   Do not stretch, relocate the header contents, or introduce a new illustration. */
#view-today .athar-today-top{min-height:0!important;padding-top:0!important}
#view-today .athar-today-top::before{display:none!important;content:none!important}
#view-today .athar-sky{
  top:-48px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  width:min(100vw,465px)!important;height:264px!important;
  background-image:url('./athar-mosque-reference.png')!important;
  background-size:100% auto!important;background-position:right top!important;
  background-repeat:no-repeat!important;
  opacity:.90!important;filter:saturate(.87)!important;
  -webkit-mask-image:radial-gradient(ellipse 71% 76% at 86% 42%,#000 0%,#000 36%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 71% 76% at 86% 42%,#000 0%,#000 36%,transparent 100%)!important;
  pointer-events:none!important;
}
body[data-theme='light'] #view-today .athar-sky{opacity:.18!important;filter:grayscale(.60) saturate(.8)!important}
body[data-theme='oled'] #view-today .athar-sky{opacity:.62!important}

/* Clear hierarchy and full-size date selector.  Arrows stay on both sides. */
#view-today .today-hijri-top{margin-bottom:9px!important;font-size:13px!important;font-weight:450!important;letter-spacing:.45px!important}
#view-today .today-heading{min-height:0!important;margin:0 0 9px!important;display:block!important}
#view-today .today-heading .page-title{font-size:clamp(38px,10.2vw,45px)!important;line-height:1.10!important;letter-spacing:-1.8px!important;font-weight:750!important}
#view-today .athar-date-controls{height:41px!important;max-width:100%!important;border-radius:24px!important;gap:0!important;overflow:hidden!important}
#view-today .athar-date-arrow{height:39px!important;width:35px!important;flex:0 0 35px!important;display:grid!important;place-items:center!important}
#view-today .athar-miladi-date{height:39px!important;gap:7px!important;padding:0 11px!important;font-size:clamp(11px,2.95vw,13px)!important;white-space:nowrap!important}
#view-today .athar-miladi-date svg{width:18px!important;height:18px!important}
#view-today .today-subrow{
  margin-top:18px!important;margin-bottom:0!important;
  min-height:37px!important;padding:0 0 12px!important;
  gap:10px!important;color:var(--text)!important;
  font-size:14px!important;font-weight:650!important;
  border-bottom:1px solid color-mix(in srgb,var(--text) 14%,transparent)!important;
}
#view-today .athar-worship-mark{height:25px!important;width:29px!important}
#view-today .athar-worship-mark svg{width:28px!important;height:25px!important}

/* Summary: dark and restrained, with ONE even neutral outline. No gold wash. */
#view-today .athar-prayer-hero{
  box-sizing:border-box!important;
  margin:12px 0 20px!important;height:128px!important;min-height:128px!important;
  padding:12px 16px!important;border-radius:23px!important;
  background:linear-gradient(118deg,#171e27 0%,#19212a 52%,#1b242e 100%)!important;
  border:1px solid #404850!important;box-shadow:none!important;
  overflow:hidden!important;
}
body[data-theme='oled'] #view-today .athar-prayer-hero{
  background:linear-gradient(118deg,#11161c,#181d24)!important;
  border-color:#383f49!important;
}
body[data-theme='light'] #view-today .athar-prayer-hero{
  background:linear-gradient(116deg,var(--surface),var(--surface2))!important;
  border-color:var(--line)!important;
}
#view-today .athar-prayer-hero::before,
#view-today .athar-prayer-hero::after{display:none!important;content:none!important}
#view-today .athar-prayer-hero .hero-content{
  box-sizing:border-box!important;display:grid!important;
  grid-template-columns:minmax(88px,.96fr) 1px minmax(146px,1.7fr)!important;
  align-items:center!important;gap:clamp(14px,4vw,22px)!important;
  width:100%!important;height:100%!important;min-height:0!important;padding:0!important;
}
#view-today .athar-prayer-hero .ring{
  width:91px!important;height:91px!important;justify-self:center!important;margin:0 auto!important;
  position:relative!important;border:0!important;border-radius:50%!important;box-shadow:none!important;
  background:conic-gradient(from -90deg,var(--accent) 0deg var(--today-ring-angle),#444d56 var(--today-ring-angle) 360deg)!important;
}
#view-today .athar-prayer-hero .ring::before{
  content:''!important;position:absolute!important;inset:9px!important;
  top:9px!important;left:9px!important;width:auto!important;height:auto!important;
  transform:none!important;border-radius:50%!important;
  background:#171e27!important;z-index:1!important;
}
body[data-theme='oled'] #view-today .athar-prayer-hero .ring::before{background:#11161c!important}
body[data-theme='light'] #view-today .athar-prayer-hero .ring::before{background:var(--surface)!important}
#view-today .athar-prayer-hero .ring-inner{position:relative!important;z-index:3!important}
#view-today .athar-prayer-hero .ring-inner strong{font-size:17px!important;font-weight:700!important}
#view-today .athar-prayer-hero .athar-hero-divider{width:1px!important;height:80%!important;background:#49515a!important}
#view-today .athar-hero-label{
  color:var(--muted)!important;font-size:clamp(10px,2.55vw,12px)!important;
  letter-spacing:1.15px!important;line-height:1.3!important;
  margin-bottom:9px!important;font-weight:650!important;white-space:nowrap!important;
}
#view-today .athar-prayer-hero .hero-amount{
  font-size:clamp(35px,9.6vw,44px)!important;line-height:1.05!important;
  letter-spacing:-1.4px!important;font-weight:740!important;
}

/* The old, full-size prayer-card rhythm returns, preserving every new motif. */
#view-today .prayer-stack{margin-top:0!important;gap:10px!important}
#view-today .athar-prayer-row{
  box-sizing:border-box!important;
  width:100%!important;height:67px!important;min-height:67px!important;
  padding:10px 16px!important;gap:9px!important;
  border-radius:22px!important;
  background:linear-gradient(110deg,#1a222b,#19212a)!important;
  border:1px solid #404850!important;box-shadow:none!important;
}
body[data-theme='oled'] #view-today .athar-prayer-row{background:linear-gradient(110deg,#111820,#171e25)!important;border-color:#353d47!important}
body[data-theme='light'] #view-today .athar-prayer-row{background:var(--surface)!important;border-color:var(--line)!important}
#view-today .athar-prayer-identity{display:flex!important;align-items:center!important;min-width:0!important;gap:11px!important}
#view-today .athar-prayer-symbol{
  width:41px!important;height:41px!important;flex:0 0 41px!important;
  display:grid!important;place-items:center!important;border-radius:50%!important;
  background:color-mix(in srgb,var(--accent) 14%,transparent)!important;
}
#view-today .athar-symbol-3{background:rgba(241,133,83,.15)!important}
#view-today .athar-symbol-4{background:rgba(131,129,221,.19)!important}
#view-today .athar-prayer-symbol svg{width:27px!important;height:27px!important;stroke-width:2.1!important}
#view-today .athar-prayer-divider{height:22px!important;width:1px!important;background:#4a515a!important}
#view-today .athar-prayer-identity .prayer-name{
  flex:0 1 auto!important;min-width:0!important;
  font-size:clamp(17px,4vw,19px)!important;line-height:1.35!important;
  font-weight:700!important;color:var(--accent)!important;
}
#view-today .status-switch{gap:8px!important;margin-left:auto!important;flex:0 0 auto!important}
#view-today .status-switch .state-btn{
  width:32px!important;height:32px!important;min-width:32px!important;flex:0 0 32px!important;
  border:1.3px solid #586370!important;border-radius:50%!important;padding:0!important;
}
#view-today .status-switch .state-btn svg{width:19px!important;height:19px!important}
#view-today .status-switch .state-btn[aria-pressed='true']{border-color:var(--accent)!important}

/* Keep the existing Today tab's approved visual materials; position is shared. */
body[data-theme='dark']:has(#view-today.active) .glass-nav{background:rgba(7,14,22,.91)!important;border-color:#29333d!important}
body[data-theme='dark']:has(#view-today.active) .glass-nav .nav-glider{background:#29323d!important;border-color:#414b56!important}

/* Small-device controls stay legible and don't collide with Arabic text. */
@media(max-width:390px){
 #view-today .athar-date-controls{height:39px!important}
 #view-today .athar-date-arrow{height:37px!important;width:30px!important;flex-basis:30px!important}
 #view-today .athar-miladi-date{height:37px!important;padding:0 7px!important;font-size:11px!important;gap:5px!important}
 #view-today .athar-prayer-hero{height:121px!important;min-height:121px!important;padding:10px!important}
 #view-today .athar-prayer-hero .hero-content{grid-template-columns:minmax(79px,1fr) 1px minmax(122px,1.55fr)!important;gap:10px!important}
 #view-today .athar-prayer-hero .ring{width:83px!important;height:83px!important}
 #view-today .athar-prayer-hero .ring::before{inset:8px!important;top:8px!important;left:8px!important}
 #view-today .athar-hero-label{font-size:9px!important;letter-spacing:.75px!important}
 #view-today .athar-prayer-hero .hero-amount{font-size:34px!important}
 #view-today .athar-prayer-row{height:65px!important;min-height:65px!important;padding:9px 10px!important}
 #view-today .athar-prayer-identity{gap:7px!important}
 #view-today .athar-prayer-symbol{width:35px!important;height:35px!important;flex-basis:35px!important}
 #view-today .athar-prayer-symbol svg{width:23px!important;height:23px!important}
 #view-today .athar-prayer-identity .prayer-name{font-size:16px!important}
 #view-today .status-switch{gap:5px!important}
 #view-today .status-switch .state-btn{width:29px!important;height:29px!important;min-width:29px!important;flex-basis:29px!important}
 #view-today .status-switch .state-btn svg{width:17px!important;height:17px!important}
}
@media(max-width:345px){
 #view-today .athar-date-long{display:none!important}
 #view-today .athar-date-short{display:inline!important}
 #view-today .athar-prayer-row{padding-inline:8px!important}
 #view-today .status-switch{gap:3px!important}
 #view-today .status-switch .state-btn{width:27px!important;height:27px!important;min-width:27px!important;flex-basis:27px!important}
}