@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* AL-DALEEL — the Iznik porcelain qibla plate.
   Every rule is scoped under #qibla2Root on purpose: the instrument is a physical
   object, so it keeps its own navy-and-cobalt identity on all five app themes.
   The ID scope also outranks the html[data-theme=...] .q2-* rules in themes.css. */

#qibla2Root {
  --q2-navy: #303090;
  --q2-navy-deep: #1b1b60;
  --q2-cobalt: #0070e0;
  --q2-turq: #20c0f0;
  --q2-sky: #b0e0ff;
  --q2-red: #ff0000;
  --q2-red-deep: #b00d12;
  --q2-ink: #eaf6ff;
  --q2-serif: "Cinzel", "Times New Roman", Georgia, serif;
  --q2-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ── the navy panel the whole instrument sits on ── */
#qibla2Root .q2-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 22px 13px 26px;
  border-radius: 22px;
  color: var(--q2-ink);
  font-family: var(--q2-serif);
  background: radial-gradient(122% 78% at 50% 2%, #2a2f8c 0%, #171a5e 46%, #0a0d33 100%);
  box-shadow: 0 24px 60px rgba(4, 8, 40, .55), inset 0 0 0 1px rgba(127, 212, 255, .22);
}

#qibla2Root .q2-head { text-align: center; line-height: 1.35; }
#qibla2Root .q2-title {
  font-family: var(--q2-serif);
  font-size: 1.3rem; font-weight: 700; letter-spacing: .3em;
  text-indent: .3em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #ffffff;
}
#qibla2Root .q2-sub {
  font-family: var(--font-ar), "Amiri", serif;
  font-size: .94rem; color: #7fd4ff; margin-top: 5px;
}

/* ── stage ── */
#qibla2Root .q2-stagewrap { width: 100%; display: flex; justify-content: center; }
#qibla2Root .q2-stage {
  position: relative;
  width: min(94vw, 400px);
  aspect-ratio: 1;
  touch-action: none;
  cursor: grab;
  user-select: none;
  filter: drop-shadow(0 26px 50px rgba(4, 8, 40, .72));
}
#qibla2Root .q2-stage.dragging { cursor: grabbing; }

#qibla2Root .q2-plate,
#qibla2Root .q2-orn,
#qibla2Root .q2-glaze { position: absolute; pointer-events: none; }

#qibla2Root .q2-plate {
  inset: .6%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 16%, #fff 0%, #f4faff 52%, #e0f0ff 100%);
  box-shadow: inset 0 0 0 4px var(--q2-navy), 0 0 90px rgba(32, 192, 240, .22);
}
#qibla2Root .q2-svg { position: absolute; inset: 0; }
#qibla2Root .q2-svg svg { width: 100%; height: 100%; display: block; }
#qibla2Root .q2-orn {
  inset: 0;
  background: url('brand/ornament-ring.png') center / 100% 100% no-repeat;
}
#qibla2Root .q2-glaze {
  inset: 10.6%;
  border-radius: 50%;
  background: linear-gradient(146deg,
    rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .06) 20%,
    rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 74%,
    rgba(255, 255, 255, .07) 100%);
}
/* red triangle index marker at the top of the dial */
#qibla2Root .q2-index {
  position: absolute;
  left: 50%; top: 4.4%;
  width: 0; height: 0;
  margin-left: -11px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 21px solid var(--q2-red);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 2px 3px rgba(4, 8, 40, .6));
  pointer-events: none;
}

/* svg typography */
#qibla2Root .q2-svg .q2-serif { font-family: var(--q2-serif); }
#qibla2Root .q2-svg .q2-mono { font-family: var(--q2-mono); }
#qibla2Root .q2-svg .q2-ar { font-family: var(--font-ar), "Amiri", serif; }

/* tour spotlights — dark unless the stage carries the matching data-tour */
#qibla2Root .q2-glow { opacity: 0; pointer-events: none; }
#qibla2Root .q2-stage[data-tour="months"] .q2-glow-months,
#qibla2Root .q2-stage[data-tour="days"] .q2-glow-days,
#qibla2Root .q2-stage[data-tour="prayers"] .q2-glow-prayers,
#qibla2Root .q2-stage[data-tour="rose"] .q2-glow-rose { animation: q2Sweep 1.7s ease-in-out infinite; }
#qibla2Root .q2-stage[data-tour="spear"] .q2-spear { animation: q2Flare 1.4s ease-in-out infinite; }
#qibla2Root .q2-badge.next { animation: q2Pulse 2s ease-in-out infinite; }

@keyframes q2Sweep { 0%, 100% { opacity: 0; } 50% { opacity: .17; } }
@keyframes q2Flare {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 9px rgba(255, 0, 0, .95)); }
}
@keyframes q2Pulse { 0%, 100% { opacity: 1; } 50% { opacity: .74; } }

@media (prefers-reduced-motion: reduce) {
  #qibla2Root .q2-glow,
  #qibla2Root .q2-badge.next,
  #qibla2Root .q2-stage[data-tour="spear"] .q2-spear { animation: none; }
}

/* ── status line ── */
#qibla2Root .q2-turn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 420px; box-sizing: border-box;
  padding: 13px 16px; border-radius: 4px;
  background: radial-gradient(circle at 30% 12%, #fff 0%, #f2faff 52%, #dceeff 100%);
  box-shadow: 0 10px 26px rgba(4, 8, 40, .5), inset 0 0 0 3px var(--q2-navy);
}
#qibla2Root .q2-lamp {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 34% 30%, #ff9a8f, var(--q2-red));
  box-shadow: 0 0 12px rgba(255, 0, 0, .7);
}
#qibla2Root .q2-turn-t {
  flex: 1; text-align: center; font-family: var(--q2-serif);
  font-size: .98rem; font-weight: 700; letter-spacing: .1em;
  color: var(--q2-navy); line-height: 1.2;
}
#qibla2Root .q2-turn-d {
  font-family: var(--q2-mono); font-size: .68rem; letter-spacing: .08em;
  color: var(--q2-cobalt); white-space: nowrap;
}
#qibla2Root .q2-turn.aligned {
  box-shadow: 0 10px 26px rgba(4, 8, 40, .5), inset 0 0 0 3px #1f8a5d;
}
#qibla2Root .q2-turn.aligned .q2-lamp {
  background: radial-gradient(circle at 34% 30%, #b8f2ff, var(--q2-turq));
  box-shadow: 0 0 14px rgba(32, 192, 240, .95);
}
#qibla2Root .q2-turn.aligned .q2-turn-t { color: #0d6a46; }

/* ── legend ── */
#qibla2Root .q2-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 15px;
  width: 100%; max-width: 420px; box-sizing: border-box;
  padding: 11px 13px; border-radius: 4px;
  background: rgba(16, 20, 80, .72);
  border: 1px solid rgba(127, 212, 255, .35);
}
#qibla2Root .q2-lg {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--q2-mono); font-size: .66rem; letter-spacing: .04em; color: #c9e4ff;
}
#qibla2Root .q2-lg .sw {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
}
#qibla2Root .q2-lg .sw-spear { background: linear-gradient(180deg, #ff6a5e, #b00d12); }
#qibla2Root .q2-lg .sw-needle { background: linear-gradient(180deg, #7fc8f0, #20c0f0 46%, #1f7fc0); }
#qibla2Root .q2-lg .sw-next {
  background: var(--q2-red); border-radius: 50%;
  box-shadow: 0 0 0 1.5px #fff;
}
#qibla2Root .q2-lg .sw-today {
  background: var(--q2-navy); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--q2-red);
}
#qibla2Root .q2-lg .sw-month { background: var(--q2-navy); box-shadow: 0 0 0 1.5px #fff; }

/* ── tour banner ── */
#qibla2Root .q2-tour {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 420px; box-sizing: border-box;
  padding: 12px 13px; border-radius: 4px;
  background: linear-gradient(178deg, #dcf0ff, #b6dcf8);
  box-shadow: inset 0 0 0 2px var(--q2-navy);
}
#qibla2Root .q2-tour-main { flex: 1; min-width: 0; }
#qibla2Root .q2-tour-word {
  font-family: var(--q2-serif);
  font-size: .9rem; font-weight: 700; letter-spacing: .14em;
  color: var(--q2-navy); line-height: 1.1;
}
#qibla2Root .q2-tour-copy {
  font-family: var(--q2-mono); font-size: .62rem; line-height: 1.5;
  color: #1d3f6b; margin-top: 5px;
}
#qibla2Root .q2-tour-side {
  display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0;
}
#qibla2Root .q2-dots { display: flex; gap: 5px; }
#qibla2Root .q2-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(48, 48, 144, .3);
  transition: background .25s ease, transform .25s ease;
}
#qibla2Root .q2-dot.on { background: var(--q2-red); transform: scale(1.5); }
#qibla2Root .q2-replay {
  font-family: var(--q2-serif); font-size: .6rem; font-weight: 700; letter-spacing: .09em;
  white-space: nowrap; color: #fff; cursor: pointer;
  padding: 7px 11px; border-radius: 3px; border: 1px solid #fff;
  background: linear-gradient(178deg, #ff5a52, #b00d12);
}
#qibla2Root .q2-replay:active { transform: translateY(1px); }

/* ── info tiles ── */
#qibla2Root .q2-tiles {
  display: grid; gap: 1px;
  width: 100%; max-width: 420px; box-sizing: border-box;
  background: rgba(127, 212, 255, .4);
  border: 1px solid rgba(127, 212, 255, .5);
}
#qibla2Root .q2-tiles-2 { grid-template-columns: repeat(2, 1fr); }
#qibla2Root .q2-tiles-3 { grid-template-columns: repeat(3, 1fr); }
#qibla2Root .q2-tiles-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 430px) {
  #qibla2Root .q2-tiles-4 { grid-template-columns: repeat(4, 1fr); }
}

#qibla2Root .q2-tile {
  background: #171a5e; border: 0; border-radius: 0; box-shadow: none;
  padding: 11px 12px; display: flex; flex-direction: column; gap: 4px;
}
#qibla2Root .q2-tile .k {
  font-family: var(--q2-mono); font-size: .57rem; letter-spacing: .15em; color: #7fd4ff;
}
#qibla2Root .q2-tile .v {
  font-family: var(--q2-serif); font-size: .95rem; color: #fff;
  letter-spacing: .03em; line-height: 1.2;
}
#qibla2Root .q2-tile .v.mono { font-family: var(--q2-mono); font-weight: 500; }

/* ── controls ── */
#qibla2Root .q2-controls {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; max-width: 420px; box-sizing: border-box;
  padding: 15px 13px;
  border: 1px solid rgba(127, 212, 255, .35);
  background: rgba(16, 20, 80, .72);
}
#qibla2Root .q2-ctl-label {
  align-self: flex-start;
  font-family: var(--q2-mono); font-size: .58rem; letter-spacing: .15em; color: #7fd4ff;
}
#qibla2Root .q2-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
#qibla2Root .q2-chip {
  font-family: var(--q2-serif); font-size: .72rem; letter-spacing: .06em; cursor: pointer;
  padding: 8px 13px; border-radius: 3px; white-space: nowrap;
  border: 1px solid rgba(127, 212, 255, .45);
  background: rgba(10, 13, 51, .9);
  color: #9fd6ff;
}
#qibla2Root .q2-chip.on {
  border-color: #fff; font-weight: 700; color: var(--q2-navy);
  background: linear-gradient(178deg, #fff, #cfe4ff);
}
#qibla2Root .q2-live {
  font-family: var(--q2-serif); font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  cursor: pointer; padding: 11px 20px; border-radius: 3px;
  border: 1px solid rgba(127, 212, 255, .6);
  background: linear-gradient(178deg, #2f8bf0, #1b1b60);
  color: #fff;
}
#qibla2Root .q2-live.on {
  background: linear-gradient(178deg, #b8f2ff, #20c0f0); color: var(--q2-navy);
}
#qibla2Root .q2-fine {
  font-family: var(--q2-mono); font-size: .6rem; line-height: 1.65;
  color: #9fd6ff; text-align: center; margin: 2px 0 0;
}

/* ── landing-intro chrome (COMPASS-ANIMATION-HANDOFF) ── */
#qibla2Root .q2-ireplay {
  position: absolute; top: 6px; right: 6px; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: #303090;
  border: 1.6px solid #303090; cursor: pointer; padding: 0;
  box-shadow: 0 2px 10px rgba(4, 8, 40, .35);
}
#qibla2Root .q2-ireplay:active { transform: scale(.94); }
#qibla2Root .q2-ireplay.running {
  border-color: #20c0f0;
  box-shadow: 0 0 0 3px rgba(32, 192, 240, .45), 0 2px 10px rgba(4, 8, 40, .35);
}
#qibla2Root .q2-ireplay.running svg { animation: q2IconSpin 1s linear infinite; }
@keyframes q2IconSpin { to { transform: rotate(360deg); } }
#qibla2Root .q2-kglow { filter: drop-shadow(0 0 14px rgba(32, 192, 240, .85)); }