/* The Qibla compass. --dial turns the card against the phone's heading (0 without the sensor), --bearing turns the needle to the Qibla on it. */
/* The frame clips the turning dial's square corners, so a turned dial never widens the page. */
.qibla-compass{--size:min(70vw,272px);--pad:18px;position:relative;width:calc(var(--size) + 2 * var(--pad));height:calc(var(--size) + 2 * var(--pad));margin:12px auto 4px;overflow:hidden}
.qibla-dial{position:absolute;inset:var(--pad);border-radius:50%;background:#fff;border:1px solid #cbd6bc;box-shadow:0 6px 22px #223c2c12,inset 0 0 0 10px #f7f9f3;transform:rotate(calc(var(--dial,0) * 1deg))}
#qiblaCard[data-state=idle] .qibla-dial,#qiblaCard[data-state=waiting] .qibla-dial{transition:transform .45s ease}
.qibla-compass svg{stroke:none;stroke-linecap:butt;stroke-linejoin:miter}
.qibla-ticks{position:absolute;inset:0;width:100%;height:100%}
.qibla-ticks circle{fill:none;transform:rotate(-90deg);transform-origin:120px 120px}
.qibla-tick-minor{stroke:#d3dcc8;stroke-width:6;stroke-dasharray:1 8.6866;stroke-dashoffset:.5}
.qibla-tick-major{stroke:#7f9670;stroke-width:11;stroke-dasharray:2.2 55.919;stroke-dashoffset:1.1}
.qibla-letter{position:absolute;left:50%;top:50%;font:600 .875rem/1 var(--sans);color:#6a7d5f;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--size) * -.345)) rotate(calc(-1 * var(--a))) rotate(calc(var(--dial,0) * -1deg))}
.qibla-letter.north{--a:0deg;color:var(--green);font-weight:800;font-size:1rem}
.qibla-letter.east{--a:90deg}.qibla-letter.south{--a:180deg}.qibla-letter.west{--a:270deg}
.qibla-needle{position:absolute;inset:0;transform:rotate(calc(var(--bearing,0) * 1deg))}
.qibla-needle svg{width:100%;height:100%;display:block}
.qibla-needle-head{fill:var(--green)}
.qibla-needle-tail{stroke:#c9d3bf;stroke-width:4;stroke-linecap:round}
.qibla-kaaba rect{fill:#1f2622}
.qibla-kaaba .qibla-kaaba-band{fill:var(--gold)}
.qibla-kaaba .qibla-kaaba-door{fill:#8d7741}
.qibla-pointer{position:absolute;z-index:1;top:calc(var(--pad) - 13px);left:50%;width:18px;height:13px;transform:translateX(-50%);background:var(--gold);clip-path:polygon(0 0,100% 0,50% 100%)}
.qibla-compass .compass-center{top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}
#qiblaCard[data-state=facing] .qibla-dial{border-color:#4f8a52;box-shadow:0 0 0 4px #4f8a5226,0 6px 22px #223c2c12,inset 0 0 0 10px #eef6ea}
#qiblaCard[data-state=facing] .qibla-pointer{background:#3f7d45}
#qiblaCard[data-state=facing] .qibla-needle-head{fill:#3f7d45}
@media(forced-colors:active){.qibla-needle-head,.qibla-kaaba rect{fill:CanvasText}.qibla-kaaba .qibla-kaaba-band{fill:Canvas}.qibla-tick-minor,.qibla-tick-major,.qibla-needle-tail{stroke:CanvasText}.qibla-pointer{background:Highlight}}