/* ATHAR 4.3.0 — explicit user-approved interface corrections. */
/* Preset colors are supplied by app.js; 60/30/10 is a design hierarchy, not per-pixel math. */
:root{--athar-secondary:#d9dce1;--athar-primary:#121417;--athar-highlight:#ff5a1f}
body{background:var(--bg)!important}
body .app-shell{min-height:0!important;padding-bottom:calc(106px + env(safe-area-inset-bottom))!important}
body .glass-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}
body .glass-nav .tab.active{color:var(--nav-accent,var(--accent))!important}
#view-today .athar-prayer-hero{background:var(--athar-card-color)!important;border-color:var(--athar-card-border)!important}
#view-today .athar-prayer-hero .hero-content{min-height:86px!important;height:86px!important;flex-basis:86px!important}
#view-today .athar-prayer-hero .ring{background:conic-gradient(var(--accent) var(--today-ring-angle),color-mix(in srgb,var(--athar-secondary) 26%,transparent) 0)!important}
#view-today .athar-prayer-hero .ring::before{background:var(--athar-card-color)!important}
/* Header: logo from the actual app icon, opposite-side Settings, artwork at left in Arabic. */
#view-today .athar-today-top{position:relative!important;isolation:isolate!important;overflow:visible!important}
#view-today .athar-today-top::after,#view-today .athar-today-top::before{display:none!important}
#view-today .athar-header-row{display:flex;direction:rtl;justify-content:space-between;align-items:center;min-height:41px;margin:0 0 17px;position:relative;z-index:3}
#view-today .athar-brand-mark{display:inline-block;width:76px;height:41px;flex:0 0 76px;background:var(--athar-secondary);-webkit-mask:url('./assets/athar-wordmark-mask.png') center/contain no-repeat;mask:url('./assets/athar-wordmark-mask.png') center/contain no-repeat;}
#view-today .athar-header-settings{position:relative;z-index:4;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--text);background:var(--athar-card-color)}
#view-today .athar-header-settings svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#view-today .athar-top-content{position:relative!important;z-index:2!important}
#view-today .today-hijri-top,#view-today .today-heading{text-align:right!important;direction:rtl!important;position:relative;z-index:2;max-width:59%;margin-inline-start:auto}
#view-today .today-heading{margin-bottom:22px!important}
#view-today .today-heading .page-title{font-size:clamp(33px,9.1vw,42px)!important}
#view-today .today-hijri-top{font-size:clamp(11px,3.1vw,14px)!important;white-space:normal}
#view-today .athar-sky{position:absolute!important;top:20px!important;bottom:auto!important;left:0!important;right:auto!important;width:min(65vw,270px)!important;height:165px!important;background-image:url('./assets/Athar_Mosque_Dark.png')!important;background-size:contain!important;background-position:center center!important;background-repeat:no-repeat!important;opacity:1!important;filter:none!important;transform:none!important;mix-blend-mode:normal!important;mask-image:none!important;-webkit-mask-image:none!important;border:0!important;box-shadow:none!important;pointer-events:none!important;z-index:0!important}
body[data-theme=light] #view-today .athar-sky{background-image:url('./assets/Athar_Mosque_Light.png')!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}
html[dir=ltr] #view-today .athar-header-row{direction:ltr}
html[dir=ltr] #view-today .athar-sky{left:auto!important;right:0!important}
html[dir=ltr] #view-today .today-hijri-top,html[dir=ltr] #view-today .today-heading{text-align:left!important;direction:ltr!important;margin-inline-end:auto;margin-inline-start:0}
#view-today .athar-date-controls{margin-top:4px!important;border-radius:24px!important;position:relative;z-index:3}
#view-today .today-subrow{position:relative;z-index:2;border:0!important;padding-bottom:5px!important;margin-top:20px!important;font-weight:660!important;color:var(--text)!important}
/* Exact compact prayer-card composition: artwork left, Arabic label center, three controls right. */
#view-today .prayer-stack{gap:9px!important}
#view-today .athar-prayer-row{box-sizing:border-box!important;height:62px!important;min-height:62px!important;max-height:62px!important;display:flex!important;direction:ltr!important;align-items:stretch!important;gap:0!important;padding:0 10px 0 0!important;border-radius:18px!important;overflow:hidden!important;background:var(--athar-card-color)!important;border:1px solid var(--athar-card-border)!important;box-shadow:none!important}
#view-today .athar-prayer-identity{display:flex!important;align-self:stretch!important;flex:1 1 auto!important;min-width:0!important;gap:0!important;padding:0!important;align-items:center!important;direction:ltr!important;border:0!important;background:none!important}
#view-today .athar-card-art{height:100%!important;width:clamp(94px,25vw,112px)!important;min-width:94px!important;flex:0 0 clamp(94px,25vw,112px)!important;align-self:stretch!important;overflow:hidden!important;mask-image:none!important;-webkit-mask-image:none!important}
#view-today .athar-card-art img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:none!important;transform:none!important;mix-blend-mode:normal!important}
#view-today .athar-prayer-identity-label{flex:1!important;min-width:0!important;padding:3px 5px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;overflow:hidden!important}
#view-today .athar-prayer-identity-label .prayer-name{font-size:clamp(14px,3.9vw,17px)!important;white-space:nowrap!important;color:var(--text)!important;font-weight:720!important;line-height:1.3!important}
#view-today .athar-main-time{font-size:clamp(10px,2.8vw,12px)!important;font-weight:520!important;white-space:nowrap!important;line-height:1.3!important;color:var(--muted)!important}
#view-today .virtue-label{font-size:8px!important}
#view-today .athar-prayer-divider{display:none!important}
#view-today .status-switch{height:100%!important;align-items:center!important;display:flex!important;gap:clamp(5px,1.9vw,10px)!important;flex:0 0 auto!important;margin:0!important;padding:0 0 0 7px!important;border-left:1px solid var(--line)!important;direction:ltr!important}
#view-today .status-switch .state-btn{width:clamp(27px,7.5vw,33px)!important;height:clamp(27px,7.5vw,33px)!important;min-width:0!important;flex:0 0 clamp(27px,7.5vw,33px)!important;border-radius:50%!important}
#view-today .status-switch .state-btn svg{width:clamp(16px,4.5vw,20px)!important;height:clamp(16px,4.5vw,20px)!important}
body[data-theme=light] #view-today .athar-prayer-row{background:var(--athar-card-color)!important}
/* Preserve the existing meaningful completed-prayer state. */
#view-today .athar-prayer-row.athar-full-activity{background:#193e30!important;border-color:#478c67!important}
body[data-theme=light] #view-today .athar-prayer-row.athar-full-activity{background:#e0f4e8!important;border-color:#70b88c!important}
#view-today .athar-prayer-hero:not(:has(.athar-quote)){padding-block:8px!important}
#view-today .athar-prayer-hero:not(:has(.athar-quote)) .hero-content{height:85px!important;flex-basis:85px!important}
/* Five grouped, fully previewed palettes rather than independent color selectors. */
.athar-theme-list{display:grid;gap:12px}
.athar-theme-option{display:flex;align-items:center;gap:12px;min-height:80px;text-align:start;padding:12px;background:var(--surface2);border:1px solid var(--line);border-radius:18px;color:var(--text)}
.athar-theme-option.selected{border-color:var(--accent);outline:1px solid var(--accent)}
.athar-theme-samples{display:flex;flex:0 0 87px;height:48px;gap:3px;padding:4px;background:var(--surface);border-radius:11px;overflow:hidden}
.athar-theme-samples i{display:block;min-width:0;border-radius:5px}
.athar-theme-samples i:first-child{flex:6}.athar-theme-samples i:nth-child(2){flex:3}.athar-theme-samples i:last-child{flex:1}
.athar-theme-copy{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.athar-theme-copy strong{font-size:13px}.athar-theme-copy small{font-size:10px;color:var(--muted);overflow-wrap:anywhere;line-height:1.5}
.athar-theme-selected{flex:0 0 18px;color:var(--accent);font-size:20px}
/* Authentic continuous Mushaf-style reading: contextual actions only after Ayah selection. */
.athar-quran-reader .athar-mushaf-page{display:block;direction:rtl;text-align:justify;text-align-last:right;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,5vw,34px);font-family:var(--font-arabic)!important;font-size:calc(clamp(22px,5.8vw,28px) * var(--arabic-scale,1))!important;line-height:2.3;letter-spacing:0;white-space:normal;word-break:normal;unicode-bidi:plaintext}
.athar-quran-reader .athar-verse{display:inline;cursor:pointer;scroll-margin-top:75px;font-family:var(--font-arabic)!important}
.athar-quran-reader .athar-verse:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:5px}
.athar-quran-reader .athar-verse.is-selected{background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:4px}
.athar-quran-reader .athar-verse-marker{display:inline;color:var(--accent);white-space:nowrap;font-family:var(--font-arabic)!important;font-size:.75em}
.athar-quran-reader .athar-ayah-menu{position:sticky;bottom:calc(env(safe-area-inset-bottom) + 12px);display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;margin:14px auto 0;padding:12px;background:var(--surface2);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 22px #0004;z-index:4}
.athar-quran-reader .athar-ayah-menu button{border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--surface);color:var(--text)}
.athar-quran-reader .athar-ayah-menu button:first-of-type{background:var(--accent);color:var(--accent-ink);border:0}
.athar-quran-reader .athar-ayah-menu span{font-size:11px;color:var(--muted)}
/* Khatma: compact 4-column grid and real checkmarks. */
.athar-khatma-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 100px}
.athar-khatma-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:100px;min-width:0;padding:8px 4px;border-radius:15px;border:1px solid var(--line);background:var(--surface);color:var(--text);text-align:center}
.athar-khatma-tile.is-complete{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.athar-khatma-check{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;border:1.5px solid var(--muted);font-size:15px;font-family:var(--font-english)!important}
.athar-khatma-tile.is-complete .athar-khatma-check{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.athar-khatma-number{font-size:13px;font-weight:750}.athar-khatma-name{font-family:var(--font-arabic)!important;font-size:clamp(10px,2.5vw,13px);line-height:1.35;overflow-wrap:anywhere}
.athar-khatma-tile:disabled{opacity:.45}
/* All strings rendered in Arabic use the chosen Arabic font, regardless of page language. */
body :lang(ar),body [dir=rtl],body .arabic-dua,body .arabic-heading,body .athar-font-ar{font-family:var(--font-arabic)!important;letter-spacing:normal!important}
body .athar-font-en,body :lang(en){font-family:var(--font-english)!important}
body .athar-font-ar :lang(ar),body .athar-mushaf-page *{font-family:var(--font-arabic)!important}
@media(max-width:390px){#view-today .status-switch{gap:5px!important;padding-left:5px!important}#view-today .athar-card-art{width:92px!important;min-width:92px!important;flex-basis:92px!important}#view-today .athar-prayer-identity-label{padding-inline:2px!important}#view-today .athar-header-row{margin-bottom:13px}}
@media(max-width:350px){#view-today .athar-card-art{width:82px!important;min-width:82px!important;flex-basis:82px!important}#view-today .status-switch .state-btn{width:25px!important;height:25px!important;flex-basis:25px!important}.athar-khatma-grid{gap:5px}}

/* Date selector follows the approved text-only mockup. */
#view-today .athar-miladi-date svg{display:none!important}
/* The approved Arabic prayer-summary mockup has its progress ring on the left. */
#view-today .athar-prayer-hero .hero-content{direction:ltr!important}
html[dir=rtl] #view-today .athar-prayer-hero .athar-hero-copy{direction:rtl!important;text-align:right!important}