/* Awwab Qibla: the compass dial (as in the Awwab app's Qibla screen), the north-up
   map-mode diagram and the world map. Shared by /qibla, the embed and the ChatGPT /
   Claude widget. Colours: the app's palette (Theme.swift, the default "Emerald"
   theme), light by default, dark with the system or [data-theme="dark"]. */
@font-face {
  font-family: "Fraunces Qibla";
  src: url("/fonts/fraunces-qibla.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}
.qd, .qn, .qm, .qp {
  --qd-accent: #C8A046; --qd-surface: #FFFFFF; --qd-elev: #F7F7F5; --qd-ink: #0F1411; --qd-soft: #6B7570; --qd-primary: #0E5E3D;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qd, :root:not([data-theme="light"]) .qn, :root:not([data-theme="light"]) .qm, :root:not([data-theme="light"]) .qp {
    --qd-accent: #E0B868; --qd-surface: #152019; --qd-elev: #1F2D24; --qd-ink: #F0EAD8; --qd-soft: #9AA8A0; --qd-primary: #3FA56F;
  }
}
:root[data-theme="dark"] .qd, :root[data-theme="dark"] .qn, :root[data-theme="dark"] .qm, :root[data-theme="dark"] .qp {
  --qd-accent: #E0B868; --qd-surface: #152019; --qd-elev: #1F2D24; --qd-ink: #F0EAD8; --qd-soft: #9AA8A0; --qd-primary: #3FA56F;
}

/* ---- dial (viewBox 0 0 320 320; the plate is 260 wide, as in the app) */
.qd { display: block; overflow: visible; direction: ltr; -webkit-user-select: none; user-select: none; }
.qd-halo { fill: var(--qd-accent); opacity: .08; transition: opacity .4s ease-in-out; }
.qd.is-facing .qd-halo { opacity: .2; }
.qd-plate { fill: var(--qd-surface); }
.qd-plate-in { stop-color: var(--qd-accent); stop-opacity: .10; }
.qd-plate-out { stop-color: var(--qd-accent); stop-opacity: 0; }
.qd-ring { fill: none; stroke-width: 1; transition: stroke-width .4s ease-in-out; }
.qd.is-facing .qd-ring { stroke-width: 2.5; }
.qd-ring-a { stop-color: var(--qd-accent); stop-opacity: .55; }
.qd-ring-b { stop-color: var(--qd-accent); stop-opacity: .18; }
.qd-seek { fill: none; stroke: var(--qd-accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 14 86; opacity: 0;
  transform-box: view-box; transform-origin: 160px 160px; transition: opacity .3s ease; }
.qd[data-state="finding"] .qd-seek { opacity: 1; animation: qd-spin 1.6s linear infinite; }
@keyframes qd-spin { to { transform: rotate(360deg); } }
.qd-rose, .qd-kaaba-arm { transform-box: view-box; transform-origin: 160px 160px; transition: opacity .4s ease; will-change: transform; }
.qd-upright { transform-box: view-box; }
.qd-tick { fill: var(--qd-soft); opacity: .45; }
.qd-tick-c { fill: var(--qd-ink); opacity: 1; }
.qd-tick-n { fill: var(--qd-accent); opacity: 1; }
.qd-letter { font: 700 14px/1 "Fraunces Qibla", Fraunces, Georgia, "Times New Roman", serif; fill: var(--qd-ink); fill-opacity: .65; }
.qd-letter-n { fill: var(--qd-accent); fill-opacity: 1; }
.qd-letter-word { font: 600 10px/1 -apple-system, "Segoe UI", Roboto, "Geeza Pro", "Noto Naskh Arabic", sans-serif; }
.qd-kaaba-disc { fill: var(--qd-accent); }
.qd-cube { fill: #121212; }
.qd-belt { fill: var(--qd-accent); }
.qd-notch-tri { fill: var(--qd-accent); }
.qd-notch-glow { fill: var(--qd-accent); opacity: .5; }
.qd-notch { transition: opacity .4s ease; }
.qd-label { font: 700 9px/1 -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 1.6px; fill: var(--qd-accent); text-transform: uppercase; }
:lang(ar) .qd-label, :lang(ur) .qd-label { font: 700 11px/1 "IBM Plex Sans Arabic", "Geeza Pro", "Noto Naskh Arabic", sans-serif; letter-spacing: 0; }
.qd-value { font: 600 32px/1 "Fraunces Qibla", Fraunces, Georgia, serif; fill: var(--qd-ink); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.qd-unit { font-size: 18px; fill-opacity: .6; }
.qd-word { font: 500 11px/1 -apple-system, "Segoe UI", Roboto, "Geeza Pro", sans-serif; letter-spacing: 1px; fill: var(--qd-soft); text-transform: uppercase; transition: fill .4s ease; }
:lang(ar) .qd-word, :lang(ur) .qd-word { letter-spacing: 0; font-size: 12px; }
.qd-word.is-aligned { fill: var(--qd-primary); font-weight: 700; }
/* idle and finding: no needle, no Kaaba, no notch: nothing that could pass for a working compass */
.qd[data-state="idle"] .qd-rose, .qd[data-state="finding"] .qd-rose { opacity: .3; }
.qd[data-state="idle"] .qd-kaaba-arm, .qd[data-state="finding"] .qd-kaaba-arm,
.qd[data-state="idle"] .qd-notch, .qd[data-state="finding"] .qd-notch { opacity: 0; }

/* ---- map mode: a flat north-up card (viewBox 0 0 160 160) */
.qn { display: block; direction: ltr; }
.qn-card { fill: var(--qd-surface); stroke: var(--qd-accent); stroke-opacity: .35; stroke-width: 1; }
.qn-grid { stroke: var(--qd-soft); stroke-opacity: .18; stroke-width: 1; stroke-dasharray: 2 4; }
.qn-north { fill: var(--qd-accent); }
.qn-n { font: 700 13px/1 "Fraunces Qibla", Fraunces, Georgia, serif; fill: var(--qd-accent); }
.qn-n-word { font: 600 10px/1 -apple-system, "Segoe UI", sans-serif; }
.qn-arrow { stroke: var(--qd-accent); stroke-width: 3; stroke-linecap: round; }
.qn-you { fill: var(--qd-ink); }

/* ---- world map (viewBox 0 0 360 150) */
.qm-sea { fill: var(--qd-elev); }
.qm-land { fill: var(--qd-soft); fill-opacity: .28; }
.qm-gc { fill: none; stroke: var(--qd-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qm-flat { stroke: var(--qd-soft); stroke-width: 1.1; stroke-dasharray: 3 3; opacity: .8; }
.qm-you { fill: var(--qd-ink); stroke: var(--qd-surface); stroke-width: 1; }
.qm-kaaba { fill: #121212; stroke: var(--qd-accent); stroke-width: .9; }

@media (prefers-reduced-motion: reduce) {
  .qd[data-state="finding"] .qd-seek { animation: none; stroke-dasharray: none; opacity: .5; }
  .qd-halo, .qd-ring, .qd-rose, .qd-kaaba-arm, .qd-notch, .qd-word { transition: none; }
}