/* ATHAR 4.3.2 — approved HOME-page visual geometry, one final style authority.
   Keeps all supplied originals; no shadows, new illustration, or altered navigation behavior.
   The header displays the same mosque RGB pixels via transparency-matted copies that
   merely remove the rectangular edge (no tint/overlay). */

/* Avoid the unsupported gap above the approved logo. */
body .app-shell:has(#view-today.active){padding-top:max(env(safe-area-inset-top),12.5vw)!important}
body .app-shell .app-top{margin-bottom:0!important;height:0!important;min-height:0!important;display:none!important}
#view-today .athar-today-top{min-height:0!important;padding-top:0!important;position:relative!important;overflow:visible!important}
#view-today .athar-header-row{min-height:41px!important;height:41px!important;margin-bottom:8px!important;position:relative!important;z-index:3!important}
#view-today .today-hijri-top{margin-bottom:6px!important;font-size:clamp(11px,3.1vw,14px)!important;line-height:1.35!important}
#view-today .today-heading{min-height:0!important;margin-bottom:8px!important}
#view-today .today-heading .page-title{font-size:clamp(35px,9vw,43px)!important;line-height:1.13!important}

/* Full-width, unified date selector: previous / centered date / next. */
#view-today .athar-date-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;max-width:none!important;height:38px!important;gap:0!important;margin-top:15px!important;background:var(--athar-card-color)!important;border:1px solid var(--athar-card-border)!important;border-radius:23px!important;overflow:hidden!important;box-shadow:none!important}
#view-today .athar-date-arrow{display:grid!important;place-items:center!important;width:41px!important;min-width:41px!important;flex:0 0 41px!important;height:36px!important;padding:0!important;border:0!important;background:transparent!important;font-size:29px!important;line-height:1!important;color:var(--accent)!important}
#view-today .athar-date-arrow:first-child{color:var(--muted)!important}
#view-today .athar-miladi-date{width:auto!important;max-width:calc(100% - 82px)!important;min-width:0!important;flex:1 1 auto!important;height:36px!important;gap:0!important;margin:0!important;padding:0 3px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;font-size:clamp(11px,3.05vw,14px)!important;font-weight:640!important;color:var(--text)!important;white-space:nowrap!important;text-align:center!important}
#view-today .athar-miladi-date svg{display:none!important}
#view-today .athar-date-long{display:inline!important}
#view-today .athar-date-short{display:none!important}
@media(max-width:375px){#view-today .athar-date-long{display:none!important}#view-today .athar-date-short{display:inline!important}}

/* Match the mockup's mosque positioning and disappear the image rectangle.
   The image is not shaded: display-only alpha at its outer boundaries. */
#view-today .athar-sky{position:absolute!important;top:-24px!important;left:0!important;right:auto!important;width:clamp(238px,69vw,295px)!important;height:183px!important;background-image:url('./assets/Athar_Mosque_Dark_EdgeTransparent.png')!important;background-position:top left!important;background-size:100% auto!important;background-repeat:no-repeat!important;transform:none!important;filter:none!important;opacity:1!important;box-shadow:none!important;mix-blend-mode:normal!important;mask:none!important;-webkit-mask:none!important;border:0!important;z-index:0!important}
body[data-theme=light] #view-today .athar-sky{background-image:url('./assets/Athar_Mosque_Light_EdgeTransparent.png')!important;filter:none!important;opacity:1!important;mix-blend-mode:normal!important}
html[dir=ltr] #view-today .athar-sky{left:auto!important;right:-7px!important;background-position:top right!important}
html[dir=rtl] #view-today .athar-sky{right:auto!important;left:-7px!important;background-position:top left!important}
#view-today .athar-top-content{position:relative!important;z-index:1!important}
#view-today .athar-brand-mark{background-color:var(--athar-secondary)!important}
#view-today .athar-header-settings{background:var(--athar-card-color)!important;box-shadow:none!important}

/* Right-aligned Arabic heading, left-aligned English heading; accent line like mockup. */
#view-today .today-subrow{display:flex!important;align-items:center!important;width:100%!important;min-height:28px!important;height:28px!important;gap:9px!important;margin:10px 0 0!important;padding:0!important;border:0!important;color:var(--text)!important;font-size:14px!important;font-weight:700!important}
#view-today .today-subrow::before{content:''!important;display:block!important;flex:0 0 4px!important;height:19px!important;background:var(--accent)!important;border-radius:8px!important}
#view-today .athar-worship-mark{display:none!important}
#view-today .prayer-info-trigger{margin-inline-start:auto!important;width:22px!important;height:22px!important;flex:0 0 22px!important;opacity:.7!important}
html[dir=ltr] #view-today .today-subrow{direction:ltr!important;text-align:left!important}
html[dir=rtl] #view-today .today-subrow{direction:rtl!important;text-align:right!important}

/* Horizontal summary exactly below the worship heading. Collapses when quote disabled. */
#view-today .athar-prayer-hero{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;gap:0!important;margin:2px 0 10px!important;padding:10px 12px!important;border-radius:20px!important;border:1px solid var(--athar-card-border)!important;box-shadow:none!important;background:var(--athar-card-color)!important}
#view-today .athar-prayer-hero .hero-content{display:grid!important;grid-template-columns:minmax(82px,1fr) 1px minmax(125px,1.54fr)!important;gap:15px!important;align-items:center!important;box-sizing:border-box!important;min-height:66px!important;height:66px!important;flex:0 0 66px!important;width:100%!important;padding:0!important}
#view-today .athar-prayer-hero .ring{height:65px!important;width:65px!important;margin:0 auto!important;justify-self:center!important;align-self:center!important}
#view-today .athar-prayer-hero .ring::before{inset:7px!important;left:7px!important;top:7px!important}
#view-today .athar-prayer-hero .ring-inner strong{font-size:15px!important}
#view-today .athar-prayer-hero .athar-hero-divider{height:80%!important;background:var(--athar-card-border)!important}
#view-today .athar-hero-label{font-size:clamp(9px,2.65vw,12px)!important;letter-spacing:.7px!important;line-height:1.4!important;white-space:nowrap!important;margin-bottom:5px!important}
#view-today .athar-prayer-hero .hero-amount{font-size:clamp(28px,8.3vw,37px)!important;line-height:1.12!important;font-weight:730!important}
#view-today .athar-prayer-hero:not(:has(.athar-quote)){padding-block:10px!important}
#view-today .athar-prayer-hero:not(:has(.athar-quote)) .hero-content{height:66px!important;flex-basis:66px!important;min-height:66px!important}
#view-today .athar-quote{margin-top:6px!important;padding:7px 3px 3px!important;gap:2px!important;border:0!important;font-size:11px!important;line-height:1.45!important}
#view-today .athar-quote strong{font-size:14px!important}

/* Compact reference prayer cards: integrated illustration, label/time, divider, 3 icons. */
#view-today .prayer-stack{display:flex!important;flex-direction:column!important;gap:9px!important;margin:0!important}
#view-today .athar-prayer-row{box-sizing:border-box!important;display:flex!important;direction:ltr!important;align-items:stretch!important;overflow:hidden!important;height:58px!important;min-height:58px!important;max-height:58px!important;padding:0 8px 0 0!important;margin:0!important;gap:0!important;border:1px solid var(--athar-card-border)!important;border-radius:18px!important;background:var(--athar-card-color)!important;box-shadow:none!important}
#view-today .athar-prayer-identity{display:flex!important;direction:ltr!important;align-items:center!important;align-self:stretch!important;flex:1 1 auto!important;min-width:0!important;height:100%!important;padding:0!important;margin:0!important;gap:0!important;background:transparent!important;border:0!important;border-radius:0!important}
#view-today .athar-card-art{position:relative!important;align-self:stretch!important;height:100%!important;width:clamp(90px,25vw,106px)!important;min-width:0!important;flex:0 0 clamp(90px,25vw,106px)!important;overflow:hidden!important;mask-image:linear-gradient(to right,#000 0%,#000 74%,transparent 100%)!important;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 74%,transparent 100%)!important}
#view-today .athar-card-art img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:55% center!important;filter:none!important;transform:none!important;opacity:1!important}
#view-today .athar-prayer-identity-label{flex:1 1 auto!important;min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:3px!important;padding:2px 3px!important;overflow:hidden!important}
#view-today .athar-prayer-identity-label .prayer-name{font-size:clamp(15px,4vw,18px)!important;line-height:1.3!important;font-weight:700!important;color:var(--text)!important;white-space:nowrap!important}
#view-today .athar-main-time{font-size:clamp(10px,2.8vw,12px)!important;line-height:1.25!important;font-weight:500!important;color:var(--muted)!important;white-space:nowrap!important;text-align:center!important}
#view-today .athar-prayer-divider{display:none!important}
#view-today .status-switch{display:flex!important;direction:ltr!important;align-items:center!important;justify-content:flex-end!important;align-self:stretch!important;height:100%!important;gap:clamp(7px,2.7vw,12px)!important;flex:0 0 auto!important;margin:0!important;padding:0 1px 0 11px!important;border-left:1px solid var(--athar-card-border)!important}
#view-today .status-switch .state-btn{width:clamp(27px,7.8vw,32px)!important;min-width:0!important;height:clamp(27px,7.8vw,32px)!important;flex:0 0 clamp(27px,7.8vw,32px)!important;border-radius:50%!important}
#view-today .status-switch .state-btn svg{height:clamp(15px,4.5vw,19px)!important;width:clamp(15px,4.5vw,19px)!important}
@media(max-width:390px){
 #view-today .athar-card-art{width:clamp(87px,24vw,99px)!important;flex-basis:clamp(87px,24vw,99px)!important}
 #view-today .status-switch{gap:6px!important;padding-left:7px!important}
 #view-today .status-switch .state-btn{width:27px!important;height:27px!important;flex-basis:27px!important}
 #view-today .athar-header-row{margin-bottom:8px!important}
}
/* Keep navigation design, placement and interactions untouched. Last prayer remains
   accessible by natural scrolling when the user's optional quote is visible. */
/* Final screenshot-calibrated spacing (393px canvas): date ~188px, worship ~246px,
   summary ~274px, first prayer ~369px; preserve current bottom navigation. */
#view-today .athar-date-controls{margin-top:27px!important}
#view-today .today-subrow{margin-top:16px!important}
#view-today .athar-prayer-hero{margin-top:6px!important}
#view-today .athar-sky{top:-10px!important}
body[data-theme=dark] #view-today,body[data-theme=oled] #view-today{
 --athar-card-color:color-mix(in srgb,var(--bg) 94%,white);
 --athar-card-border:color-mix(in srgb,var(--text) 12%,transparent);
}
#view-today .athar-quote{margin-top:4px!important;padding:2px 3px 0!important;gap:1px!important;font-size:11px!important;line-height:1.25!important}
#view-today .athar-quote strong{font-size:12px!important;line-height:1.25!important}
#view-today .athar-quote small{font-size:10px!important;line-height:1.25!important}
/* Arabic word order and mosque framing: keep all header copy on the right
   and limit the illustrated left half so artwork never runs behind date text. */
html[dir=rtl] #view-today .today-hijri-top{margin-right:0!important;margin-left:auto!important;max-width:50%!important;text-align:right!important;direction:rtl!important;white-space:normal!important;font-size:clamp(10px,2.7vw,12px)!important}
html[dir=rtl] #view-today .today-heading{margin-right:0!important;margin-left:auto!important;max-width:50%!important;text-align:right!important}
html[dir=rtl] #view-today .athar-sky{width:clamp(204px,55vw,240px)!important}
/* Explicit bidirectional numeric elements prevent `5 من 0` reordering. */
#view-today .athar-hero-numeric{display:flex!important;flex-direction:row!important;align-items:baseline!important;justify-content:flex-start!important;gap:5px!important;white-space:nowrap!important;line-height:1.13!important}
#view-today .athar-hero-numeric[dir=rtl]{direction:rtl!important;text-align:right!important}
#view-today .athar-hero-numeric[dir=ltr]{direction:ltr!important;text-align:left!important}
#view-today .athar-hero-numeric .hero-count{font-size:clamp(29px,8.2vw,36px)!important;font-weight:730!important;color:var(--text)!important}
#view-today .athar-hero-numeric.has-progress .hero-count{color:var(--accent)!important}
#view-today .athar-hero-numeric .hero-total{font-size:clamp(29px,8.2vw,36px)!important;font-weight:730!important;color:var(--text)!important}
#view-today .athar-hero-numeric .hero-connector{font-size:clamp(18px,5.8vw,24px)!important;font-weight:650!important;color:var(--text)!important}
/* Content has its own 48px safe clearance; do not manufacture empty scroll
   with a second 106px bottom padding when the page fits. */
body .app-shell:has(#view-today.active){padding-bottom:calc(54px + env(safe-area-inset-bottom))!important}
body .app-shell:has(#view-today.active){padding-bottom:calc(46px + env(safe-area-inset-bottom))!important}
/* On the narrow 375px iPhone viewport, keep all five approved card contents
   above the unchanged dock even when the optional 3-line quote is visible. */
@media(max-width:390px){
 #view-today .prayer-stack{gap:8px!important}
 #view-today .athar-prayer-row{height:53px!important;min-height:53px!important;max-height:53px!important}
}