/* Athar 4.2.1 — reference fidelity: only Today and existing dock artwork. */
/* Decorations use original reference crop, free of screenshot words/UI; all dates, prayers and buttons remain live. */
#view-today {position:relative; isolation:isolate;}
#view-today .athar-today-top {min-height: 186px; padding-top:0px;}
#view-today .athar-sky {
  left:calc(50% - 50vw);right:calc(50% - 50vw);top:-39px;height:242px;
  opacity:1;filter:hue-rotate(var(--athar-hue-shift,0deg));
  background-image:linear-gradient(0deg,var(--bg) 0%,transparent 25%),url('./athar-mosque-reference.png'),
                   radial-gradient(ellipse 60% 55% at 90% 44%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 85%);
  background-size:cover,100% auto,cover;
  background-position:center top, center top, center;
  background-repeat:no-repeat;
}
#view-today .today-hijri-top{margin:0 0 13px;font-size:13px;line-height:1.3;letter-spacing:.35px;font-weight:500;color:var(--text)}
#view-today .today-heading {min-height:0!important;margin:0 0 10px!important;display:block!important}
#view-today .today-heading .page-title {font-size:clamp(36px,10vw,44px)!important;line-height:1.15!important;font-weight:780!important;letter-spacing:-2.3px!important;}
#view-today .athar-date-controls {width:max-content;max-width:100%;height:38px;border-radius:24px;background:color-mix(in srgb,var(--bg) 68%,transparent);border-color:color-mix(in srgb,var(--text) 10%,transparent);backdrop-filter:blur(12px)}
#view-today .athar-date-arrow {height:36px;width:33px;flex:0 0 33px;font-size:27px;line-height:1;color:var(--text)}
#view-today .athar-miladi-date {height:36px;background:color-mix(in srgb,var(--bg) 65%,transparent);border:1px solid color-mix(in srgb,var(--text) 11%,transparent);padding:0 11px;font-size:clamp(11px,2.9vw,13px);letter-spacing:.05px}
#view-today .athar-miladi-date svg{width:17px;height:17px}
#view-today .today-subrow {margin-top:19px!important;margin-bottom:0!important;padding:0 0 11px!important;gap:9px!important;min-height:34px!important;font-size:14px!important;font-weight:650!important;line-height:1.3!important;color:var(--text)!important;border-bottom:1px solid color-mix(in srgb,var(--text) 13%,transparent)}
#view-today .athar-worship-mark {height:24px;width:27px;}
#view-today .athar-worship-mark svg {height:24px;width:26px;stroke-width:1.7;}
#view-today .prayer-info-trigger {margin:0!important;color:var(--text);width:23px;height:23px;min-width:23px}
#view-today .prayer-info-trigger svg {width:21px;height:21px}
/* Preserve the visible 5–10 minute icon information sheet and existing date / prayer mechanics. */
#view-today .athar-prayer-hero {margin:9px 0 17px!important;padding:11px!important;min-height:117px!important;
  background:radial-gradient(ellipse 58% 83% at 97% 0%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 82%),
             radial-gradient(ellipse 52% 130% at 105% 90%, color-mix(in srgb,var(--accent) 7%,transparent),transparent 67%),
             linear-gradient(118deg,color-mix(in srgb,var(--bg) 91%,#000) 15%,color-mix(in srgb,var(--bg) 91%,#232b2d))!important;
  border:1px solid color-mix(in srgb,var(--text) 17%,transparent)!important;
  border-right-color:color-mix(in srgb,var(--accent) 52%,transparent)!important;
  box-shadow:none!important;border-radius:23px!important;}
#view-today .athar-prayer-hero::after {content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:linear-gradient(159deg, transparent 52%, color-mix(in srgb,var(--accent) 4%,transparent) 84%);
  clip-path:polygon(56% 100%,100% 37%,100% 100%);opacity:.6}
#view-today .athar-prayer-hero .hero-content {position:relative;z-index:1;grid-template-columns:minmax(92px,1fr) 1px minmax(155px,1.55fr)!important;min-height:111px!important;gap:16px!important;padding:3px 6px!important;}
#view-today .athar-prayer-hero .ring {width:97px!important;height:97px!important; margin:auto!important;
  background:conic-gradient(from -12deg,var(--accent) 0 max(6%, calc(var(--pct) * 1%)),rgba(124,136,148,.30) 0)!important;
  box-shadow:none!important;}
#view-today .athar-prayer-hero .ring::before {content:"";inset:7px!important;left:7px!important;top:7px!important;width:auto!important;height:auto!important;
  transform:none!important;border-radius:50%;background:color-mix(in srgb,var(--bg) 93%,#020506)!important;z-index:1!important}
#view-today .athar-prayer-hero .ring span,#view-today .athar-prayer-hero .ring strong {position:relative;z-index:3}
#view-today .athar-prayer-hero .athar-hero-divider{height:88%!important;background:rgba(161,173,186,.22)!important}
#view-today .athar-prayer-hero .hero-amount {font-size:clamp(31px,8vw,39px)!important;letter-spacing:-1.4px;font-weight:740!important;}
#view-today .athar-hero-label {letter-spacing:1.4px!important;font-size:10px!important;font-weight:650!important;margin-bottom:10px!important;white-space:nowrap}
#view-today .prayer-stack {margin-top:0!important;gap:7px!important;}
#view-today .athar-prayer-row {min-height:51px!important;height:51px!important;gap:9px!important;padding:5px 13px!important;
  background:linear-gradient(105deg, color-mix(in srgb,var(--bg) 94%,#242a31) 12%, color-mix(in srgb,var(--bg) 92%,#323a43))!important;
  border:1px solid color-mix(in srgb,var(--text) 13%,transparent)!important;border-radius:19px!important;box-shadow:none!important}
#view-today .athar-prayer-identity {display:flex;gap:11px;align-items:center;flex:1;min-width:0;white-space:nowrap;}
#view-today .athar-prayer-symbol {width:35px;height:35px;flex:0 0 35px;color:var(--accent);border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);display:grid;place-items:center;}
#view-today .athar-prayer-symbol svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.2;}
#view-today .athar-symbol-3 {color:#fc955c;background:rgba(242,130,82,.12)}
#view-today .athar-symbol-4 {color:#a6a0ff;background:rgba(141,145,238,.15)}
#view-today .athar-prayer-divider {width:1px;height:18px;flex:0 0 1px;background:color-mix(in srgb,var(--text) 15%,transparent)}
#view-today .athar-prayer-identity .prayer-name{flex:none;min-width:0;text-align:start;font-size:clamp(14px,3.8vw,17px)!important;line-height:1.3!important;font-weight:700!important;color:var(--accent)}
#view-today .status-switch{gap:8px!important;margin-left:auto}
#view-today .status-switch .state-btn{width:28px!important;height:28px!important;min-width:28px!important;flex:0 0 28px!important;border-width:1.3px!important;border-color:color-mix(in srgb,var(--text) 26%,transparent)!important;border-radius:50%!important;background:transparent!important;padding:0!important}
#view-today .status-switch .state-btn svg{height:17px!important;width:17px!important}
#view-today .status-switch .state-btn.early svg{height:18px!important;width:18px!important}
/* Nav matches the approved five original symbols, with neutral opaque bubble. */
body[data-theme=dark] .glass-nav,body[data-theme=oled] .glass-nav {background:rgba(8,16,25,.88)!important;border:1px solid rgba(151,163,180,.18)!important;box-shadow:none!important;}
body[data-theme=dark] .glass-nav .nav-glider,body[data-theme=oled] .glass-nav .nav-glider {background:linear-gradient(160deg,rgba(132,143,160,.24),rgba(119,129,146,.16))!important;border:1px solid rgba(176,185,200,.15)!important;box-shadow:none!important}
.glass-nav .tab-icon svg {width:var(--icon-size,23px)!important;height:var(--icon-size,23px)!important;max-width:28px!important;max-height:28px!important;}
/* light and custom colors adapt, never force dark visual palette as a permanent theme */
body[data-theme=light] #view-today .athar-sky {opacity:.17;filter:grayscale(.65) hue-rotate(var(--athar-hue-shift,0deg))}
body[data-theme=oled] #view-today .athar-sky {opacity:.62}
@media(max-width:375px){#view-today .athar-prayer-hero .hero-content{grid-template-columns:minmax(81px,1fr) 1px minmax(135px,1.65fr)!important;gap:11px!important}#view-today .athar-prayer-hero .ring{width:88px!important;height:88px!important}#view-today .athar-prayer-identity{gap:7px}#view-today .athar-prayer-symbol{width:31px;height:31px;flex-basis:31px}#view-today .athar-prayer-symbol svg{width:21px;height:21px}#view-today .status-switch{gap:4px!important}#view-today .status-switch .state-btn{width:26px!important;height:26px!important;min-width:26px!important;flex-basis:26px!important}#view-today .athar-prayer-row{padding-left:10px!important;padding-right:10px!important}}
/* Final spacing pass against 941 × 1672 approved reference. */
#view-today .athar-today-top{min-height:0!important}
#view-today .today-hijri-top{margin-bottom:6px!important}
#view-today .today-heading{min-height:37px!important;margin-bottom:4px!important}
#view-today .today-heading .page-title{font-size:clamp(33px,9.3vw,40px)!important;line-height:1.10!important}
#view-today .athar-date-controls{height:36px!important}
#view-today .athar-date-arrow{height:34px!important}
#view-today .athar-miladi-date{height:34px!important}
#view-today .today-subrow{margin-top:10px!important;padding-bottom:6px!important;min-height:30px!important}
#view-today .athar-prayer-hero{background:radial-gradient(ellipse 41% 78% at 99% 0%, color-mix(in srgb,var(--accent) 39%,transparent), transparent 88%),radial-gradient(ellipse 45% 130% at 105% 90%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 73%),linear-gradient(113deg,color-mix(in srgb,var(--bg) 95%,#06080c),color-mix(in srgb,var(--bg) 95%,#222c36))!important}