/* Studio component: the Qibla screen of the Sabeel app (inbox #17). Reads tokens only.
   The dial turns with the phone; the Kaaba (mark A) sits on the ring at the qibla bearing; the fixed pointer at the top
   is where the phone points. Aligned (within 3 degrees): the ring and the pointer turn gold and the line reads "Facing
   the qibla". No compass (a computer): the dial stays north-up and the bearing is written out. Drawn by qibla.js. */

.qibla { display: grid; justify-items: center; gap: var(--space-5); padding-top: var(--space-4); }
.qsay { display: grid; justify-items: center; gap: 4px; text-align: center; min-height: var(--size-dock); }
.qsay b { font: var(--font-weight-semibold) var(--font-size-headline)/1.15 var(--font-family-name); color: var(--color-fg); }
.qsay span { font-size: var(--font-size-body); color: var(--color-muted); }
.qibla.on .qsay b { color: var(--color-accent); }
.dial { position: relative; width: min(84vw, var(--size-dial)); max-width: 100%; aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial .face { fill: var(--color-surface); stroke: var(--color-line); stroke-width: 1; }
.dial .tick { stroke: var(--color-muted); stroke-width: 1; opacity: .5; }
.dial .tick.big { stroke-width: 2; opacity: .9; }
.dial .card { fill: var(--color-muted); font: var(--font-weight-semibold) var(--font-size-label) var(--font-family-body); text-anchor: middle; dominant-baseline: central; }
.dial .card.n { fill: var(--color-accent); }
.dial .arc { fill: none; stroke: var(--color-gold); stroke-width: 4; stroke-linecap: round; opacity: .9; }
.dial .line { stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.dial .rot { transition: transform var(--motion-duration-settle) var(--motion-easing-out); transform-origin: 170px 170px; }
.dial .ptr { fill: var(--color-fg); }
.qibla.on .dial .ptr { fill: var(--color-gold); }
.qibla.on .dial .face { stroke: var(--color-gold); stroke-width: 3; }
.qfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); width: 100%; max-width: var(--size-sheet); }
.qfacts div { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-row); background: var(--color-surface); border: 1px solid var(--color-line); }
.qfacts b { font: var(--font-weight-semibold) var(--font-size-title)/1.2 var(--font-family-name); font-variant-numeric: tabular-nums; }
.qfacts span { font-size: var(--font-size-label); color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .dial .rot { transition: none; } }