
/* Athar 4.2: Today visual refinements based on approved reference; do not alter main nav. */
#view-today{isolation:isolate; position:relative;}
#view-today .athar-today-top{position:relative;min-height:292px;padding-top:8px;z-index:0}
#view-today .athar-sky{pointer-events:none;position:absolute;top:-48px;right:-18px;left:0;height:340px;opacity:.85;background-image:linear-gradient(90deg,var(--bg, #10151a) 3%,transparent 57%),linear-gradient(0deg,var(--bg, #10151a) 0%,transparent 45%),url('./athar-mosque-atmosphere.png');background-size:cover,cover,auto 345px;background-position:center,right top,right top;background-repeat:no-repeat;z-index:-1;filter:saturate(.88);}
#view-today .athar-top-content{position:relative;z-index:1}
#view-today .today-hijri-top{display:block;color:var(--text, #f3f4f5);font-size:14px;letter-spacing:1px;font-weight:500;margin-bottom:19px}
#view-today .today-heading{display:block;margin:0 0 12px!important;}
#view-today .today-heading .page-title{font-size:clamp(35px,10vw,48px);line-height:1.13;letter-spacing:-1.5px;margin:0}
#view-today .athar-date-controls{display:flex;align-items:center;justify-content:flex-start;max-width:100%;gap:0;width:max-content;height:44px;border:1px solid var(--border,rgba(255,255,255,.13));border-radius:28px;background:rgba(17,22,28,.53);overflow:hidden;backdrop-filter:blur(18px);}
#view-today .athar-date-arrow{border:0;color:var(--text,#fff);background:transparent;font:300 30px/1 sans-serif;width:40px;height:42px;flex:0 0 40px;cursor:pointer;}
#view-today .athar-miladi-date{display:flex;align-items:center;gap:7px;color:var(--accent);border:1px solid rgba(160,170,180,.14);border-radius:27px;background:rgba(22,25,29,.64);padding:0 12px;height:40px;font-size:clamp(11px,2.8vw,14px);font-weight:650;white-space:nowrap;cursor:pointer;}
#view-today .athar-miladi-date svg{height:19px;width:19px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0}
#view-today .athar-return-today{margin-top:9px;display:inline-flex;width:auto;min-height:27px;padding:4px 12px;font-size:12px;border-radius:18px;color:var(--accent);border:1px solid var(--accent);background:rgba(15,18,23,.35)}
#view-today .today-subrow{margin-top:25px!important;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;padding-bottom:12px;border-bottom:1px solid rgba(154,163,178,.14)}
#view-today .athar-worship-mark{font-size:24px;color:var(--accent);line-height:1}
#view-today .prayer-info-trigger{margin-inline-start:0;}
#view-today .hijri-occasions{position:relative;margin:0 0 12px;z-index:1}
#view-today .athar-prayer-hero{position:relative;overflow:hidden;margin-top:5px!important;background:radial-gradient(ellipse at 96% 0%,color-mix(in srgb,var(--accent) 35%, transparent),transparent 55%),linear-gradient(117deg,color-mix(in srgb,var(--card-bg,var(--surface,#202830)) 95%,#020506) 10%,var(--card-bg,var(--surface,#202830)) 100%)!important;border:1px solid color-mix(in srgb,var(--accent) 23%,transparent)!important;}
#view-today .athar-prayer-hero .hero-content{display:grid!important;grid-template-columns:minmax(95px,.95fr) 1px minmax(140px,1.8fr)!important;gap:clamp(13px,4vw,25px)!important;align-items:center;justify-content:stretch;padding:16px 4px;min-height:140px;}
#view-today .athar-prayer-hero .ring{grid-column:1;grid-row:1;margin:auto;}
#view-today .athar-prayer-hero .athar-hero-divider{grid-column:2;grid-row:1;background:rgba(142,157,176,.28);height:85%;width:1px}
#view-today .athar-hero-copy{grid-column:3;grid-row:1;min-width:0}
#view-today .athar-hero-label{font-size:clamp(10px,2.5vw,13px);letter-spacing:1.3px;color:var(--muted,#a8b0b9);margin-bottom:10px;font-weight:550}
#view-today .athar-prayer-hero .hero-amount{font-size:clamp(32px,9vw,49px);line-height:1.08;font-weight:740;white-space:nowrap;color:var(--text,#fafafa)}
#view-today .athar-prayer-hero .hero-amount small{font-size:inherit;font-weight:inherit;}
#view-today .athar-prayer-row{display:flex;align-items:center;gap:12px;min-height:62px;}
#view-today .athar-prayer-symbol{display:flex;align-items:center;justify-content:center;width:39px;height:39px;flex:0 0 39px;border-radius:50%;background:color-mix(in srgb,var(--accent) 13%,transparent);font-size:24px;color:var(--accent);line-height:1}
#view-today .athar-symbol-3{color:#ff9552;background:rgba(255,127,75,.12)}
#view-today .athar-symbol-4{color:#b4abff;background:rgba(145,144,255,.16)}
#view-today .prayer-name{flex:1;min-width:0;text-align:start;color:var(--accent);font-weight:700;}
#view-today .status-switch{flex:0 0 auto;}
#view-duas .button[data-action="dua-new"],#view-duas .add-dua-btn,#view-duas .dua-add-main{color:var(--accent-ink)!important;}
.dev-dashboard .surface-card{margin-bottom:16px}.dev-dashboard h3{margin:0 0 10px}.dev-dashboard .dev-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.dev-dashboard .dev-actions .button{flex:1 1 125px}.dev-dua-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:12px 0;border-top:1px solid rgba(140,150,165,.18)}.dev-dua-row strong{flex:1 1 130px}.dev-dua-row span{font-size:11px;color:var(--muted)}.dev-protected-toggle{display:flex;gap:9px;align-items:center;margin-bottom:16px}.dev-preview-exit{position:fixed;z-index:999;top:env(safe-area-inset-top,12px);right:16px;padding:12px;border-radius:12px;background:#333;color:white;border:1px solid #666}
@media(max-width:375px){#view-today .athar-date-controls{height:41px}#view-today .athar-date-arrow{width:30px;flex-basis:30px}#view-today .athar-miladi-date{padding:0 7px;font-size:11px}#view-today .athar-prayer-row{gap:7px}#view-today .athar-prayer-symbol{width:31px;height:31px;flex-basis:31px;font-size:20px}#view-today .athar-prayer-hero .hero-content{gap:10px!important}}
body[data-theme='light'] #view-today .athar-sky{opacity:.19;filter:grayscale(.6)}
body[data-theme='oled'] #view-today .athar-sky{opacity:.57}

#view-duas .duas-command .button[data-action="dua-new"]{color:var(--accent-ink)!important;}
/* Compact proportions calibrated against the supplied iPhone reference. */
#view-today .athar-today-top{min-height:215px}
#view-today .athar-prayer-hero{padding:12px!important}
#view-today .athar-prayer-hero .hero-content{min-height:115px;padding:5px 3px}
#view-today .athar-prayer-hero .ring{width:104px;height:104px}
#view-today .athar-prayer-row{min-height:55px;padding-top:8px;padding-bottom:8px}
#view-today .prayer-stack{gap:9px}
#view-today .athar-worship-mark{display:inline-flex;height:24px;align-items:center;justify-content:center}
#view-today .athar-worship-mark svg{width:25px;height:25px;stroke:var(--accent);stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:375px){#view-today .athar-prayer-hero .ring{width:92px;height:92px}#view-today .athar-prayer-hero .hero-content{min-height:110px}#view-today .athar-today-top{min-height:204px}}

#view-today .athar-date-short{display:none}
#view-today .athar-prayer-hero .ring::before{content:"";position:absolute;z-index:2;left:50%;top:0;transform:translateX(-50%);width:18%;height:7px;border-radius:7px;background:var(--accent);pointer-events:none}
@media(max-width:360px){#view-today .athar-date-long{display:none}#view-today .athar-date-short{display:inline}#view-today .athar-date-controls{max-width:100%}}
#view-today{overflow-x:clip}
