/* AL-HARAMEEN — qibla.css  («القبلة والشمس» / "Qibla & the Sun": qibla.html, en/qibla.html)
   Builds on main.css + tools.css. Every block that JavaScript fills keeps its size from
   the first paint (fixed heights, aspect ratios, one-line text), so nothing shifts. */

/* Latin text in Cairo: main.css's "Cairo Fallback" is about 9 % wider than Cairo for Latin
   letters (measured: 670 px against 616–623 px for one Spanish heading at 24 px), so a heading
   that fits one line in Cairo breaks onto two before the font arrives, and the page jumps when
   it does (CLS 0.14 seen at 694 px). A Latin-only fallback at the measured width keeps the line
   breaks. Not applied where the page sets its own heading face (ru: Rubik; ur, ps: Naskh). */
@font-face {
  font-family: "Cairo Fallback Latin"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 96.3%; ascent-override: 135.3%; descent-override: 59.3%; line-gap-override: 0%;
  unicode-range: U+0000-024F, U+2000-206F, U+20AC;
}
html:not([lang="ru"]):not([lang="ur"]):not([lang="ps"]) .qb {
  --font-head: "Cairo", "Cairo Fallback Latin", "Cairo Fallback", "Segoe UI", Tahoma, sans-serif;
}
.qb .tool-card > p { color: var(--ink-soft); max-width: 75ch; }
.qb .tool-card > p + p { margin-top: 8px; }
.qb h3 { font-size: 17px; color: var(--green-900); }

/* ---------- city + compass ---------- */
.qb-pick { min-height: 80px; margin-top: 6px; }
.qb-cityline {
  margin-top: 2px; min-height: 1.8em; font-size: 15px; color: var(--ink-soft);
  display: flex; align-items: baseline; gap: .45em; white-space: nowrap; overflow: hidden;
}
.qb-city { font-family: var(--font-head); font-size: 19px; color: var(--green-900); }
.qb-code { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; color: var(--green-700); }
.qb-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px;
  align-items: center; margin-top: 10px;
}
.qb-rose-wrap { margin: 0; width: 100%; max-width: 430px; aspect-ratio: 1 / 1; justify-self: center; }
.qb-rose { width: 100%; height: 100%; display: block; overflow: visible; }
.qb-disc { filter: drop-shadow(0 10px 22px rgba(7, 33, 21, .35)); }
.qb-ring { fill: none; stroke: url(#qbGold); stroke-width: 4; }
.qb-ring2 { fill: none; stroke: rgba(232, 212, 147, .22); stroke-width: 1; }
.qb-star rect { fill: rgba(255, 255, 255, .025); stroke: rgba(232, 212, 147, .28); stroke-width: 1.2; }
.qt-sm { stroke: rgba(232, 212, 147, .45); stroke-width: 1; }
.qt-mid { stroke: rgba(232, 212, 147, .7); stroke-width: 1.4; }
.qt-big { stroke: #E8D493; stroke-width: 2.2; }
.qt-num { fill: #CFE3D6; font: 600 13px var(--font-head); text-anchor: middle; }
.ql { fill: #F2ECD6; font: 800 24px var(--font-head); text-anchor: middle; }
.ql-n { fill: #FF7A6B; }
.qb-needle { fill: url(#qbGold); stroke: #6E5212; stroke-width: .8; }
.qb-needle-hi { fill: rgba(255, 255, 255, .28); }
.qb-kbg { fill: #072115; stroke: url(#qbGold); stroke-width: 3; }
.qb-kaaba { fill: #111; stroke: #E8D493; stroke-width: 1.2; }
.qb-kband { fill: #C9A544; }
.qb-cap { fill: url(#qbGold); stroke: #6E5212; stroke-width: 1; }
.qb-phone { fill: var(--ink-faint); opacity: 0; transition: opacity .2s; }
.qb-live .qb-phone, .qb-main.qb-live .qb-phone { opacity: 1; fill: var(--green-700); }
.qb-main.qb-aligned .qb-phone { fill: var(--gold-500); }
.qb-main.qb-aligned .qb-ring { stroke: #F6E7AE; stroke-width: 7; filter: drop-shadow(0 0 10px rgba(232, 212, 147, .9)); }
.qb-main.qb-aligned .qb-disc { fill: #3B2F0C; }

.qb-facts { min-width: 0; }
.qb-fact {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px dashed var(--line);
}
.qb-k { color: var(--ink-soft); font-size: 15px; }
.qb-v {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 3vw, 30px); color: var(--green-900);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 9.8ch; text-align: end;   /* fixed box: the value never moves it */
}
html[dir="rtl"] .qb-v.tool-ltr { text-align: left; }   /* an LTR box: its "end" would be the right */
.qb-live {
  margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--green-100);
  border: 1px solid rgba(14, 91, 56, .15);
}
.qb-live h3 { margin-bottom: 10px; }
.qb-live .btn { width: 100%; }
.qb-turn {
  margin-top: 12px; min-height: 3.2em; font-family: var(--font-head); font-weight: 800; font-size: 18px;
  line-height: 1.55; color: var(--green-900);
}
.qb-turn.ok { color: #8A6718; }
.qb-acc { min-height: 1.5em; font-size: 13px; color: var(--ink-faint); }

.qb-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
@media (max-width: 700px) { .qb-notes { grid-template-columns: 1fr; } }
.qb-notes > p, .qb-note8 {
  margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft); line-height: 1.7;
}
.qb-note8 { display: flex; gap: 12px; align-items: center; }
.qb-fig8 { width: 74px; height: 37px; flex: 0 0 auto; }
.qb-fig8-path { fill: none; stroke: var(--green-600); stroke-width: 2.4; stroke-dasharray: 4 3; }
.qb-fig8-phone {
  fill: var(--gold-500); stroke: var(--green-900); stroke-width: 1;
  offset-path: path("M60 30 C45 6 15 6 15 30 C15 54 45 54 60 30 C75 6 105 6 105 30 C105 54 75 54 60 30 Z");
  offset-rotate: auto 90deg; animation: qb-fig8 4s linear infinite;
}
@keyframes qb-fig8 { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------- the sun shows the Qibla ---------- */
.qb-daterow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.qb-daterow label { font-weight: 700; color: var(--green-900); }
.qb-daterow input {
  font: inherit; font-size: 16px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--card); color: var(--ink); min-height: 44px;
}
.qb-daterow input:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(15, 122, 68, .15); }
.qb-daterow .tool-pill { min-height: 44px; }
.qb-suncity {
  margin-top: 10px; font-weight: 700; color: var(--green-900); min-height: 1.7em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qb-sungrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 12px; }
.qb-suncards { display: grid; gap: 14px; }
.qb-suncard {
  border-radius: 16px; padding: 16px 18px; border: 1px solid var(--line); background: var(--card);
  min-height: 196px;
}
.qb-suncard.face { background: linear-gradient(150deg, #FFF8E4, #FFFDF6 60%); border-color: #EBD9A0; }
.qb-suncard.shadow { background: linear-gradient(150deg, #EEF4F0, #FBFCFB 60%); }
.qb-sc-top { display: flex; gap: 10px; align-items: center; }
.qb-sc-ico { font-size: 26px; line-height: 1; }
.qb-sc-top h3 { font-size: 16.5px; line-height: 1.45; }
.qb-sc-time {
  font-family: var(--font-head); font-weight: 800; font-size: 46px; line-height: 1.2; margin-top: 6px;
  color: var(--green-900); font-variant-numeric: tabular-nums; direction: ltr; min-height: 1.2em;
}
.qb-suncard.face .qb-sc-time { color: #8A6718; }
.qb-sc-time .ap { font-size: .4em; color: var(--ink-soft); margin-inline-start: .15em; }
html[dir="rtl"] .qb-sc-time .ap { margin-left: 0; margin-right: .15em; }
.qb-suncard.none .qb-sc-time { color: var(--ink-faint); }
.qb-sc-how { font-weight: 700; color: var(--ink); margin-top: 2px; }
.qb-sc-more { font-size: 14px; color: var(--ink-soft); margin-top: 4px; min-height: 3.2em; }
.qb-sky { margin: 0; }
.qb-sky svg { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; display: block; margin: 0 auto; }
.qb-sky figcaption { font-size: 13px; color: var(--ink-faint); margin-top: 8px; text-align: center; }
.qs-disc { fill: #0C2A1B; stroke: var(--gold-500); stroke-width: 2; }
.qs-alt { fill: none; stroke: rgba(232, 212, 147, .22); stroke-width: 1; stroke-dasharray: 3 4; }
.qs-l { fill: #4C5850; font: 800 13px var(--font-head); text-anchor: middle; }
.qs-path { fill: none; stroke: #FFC94D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255, 201, 77, .55)); }
.qs-q { stroke: #E8D493; stroke-width: 3; }
.qs-opp { stroke: rgba(232, 212, 147, .65); stroke-width: 2; stroke-dasharray: 6 5; }
.qs-kaaba { fill: #111; stroke: #E8D493; stroke-width: 1.2; }
.qs-kband { fill: #C9A544; }
.qs-face { fill: #FFD35A; stroke: #fff; stroke-width: 2.5; }
.qs-shadow { fill: #0C2A1B; stroke: #FFD35A; stroke-width: 3; }
.qs-now { fill: #fff; stroke: #FF9D2E; stroke-width: 2.5; }
.qs-zen { fill: rgba(255, 255, 255, .6); }

/* ---------- the sun over the Kaaba ---------- */
.qb-zgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 16px; }
.qb-zcard {
  border-radius: 16px; padding: 18px; color: var(--panel-ink); min-height: 300px;
  background: radial-gradient(120% 130% at 85% -10%, #1C3B2A 0%, var(--panel) 60%, #08140E 100%);
  border: 1px solid var(--panel-line);
}
.qb-zcard.anti { background: radial-gradient(120% 130% at 15% -10%, #1B2A3D 0%, #0E1724 60%, #070C14 100%); border-color: #26364C; }
.qb-ztype { font-family: var(--font-head); font-weight: 800; color: var(--gold-300); font-size: 15.5px; }
.qb-zdate { font-family: var(--font-head); font-weight: 800; font-size: 21px; margin-top: 6px; line-height: 1.45; min-height: 1.45em; }
.qb-zin {
  display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 12px;
  background: rgba(53, 194, 113, .16); color: var(--live); min-height: 1.6em;
}
.qb-zdl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.qb-zdl > div { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.qb-zdl dt { font-size: 12.5px; color: var(--panel-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-zdl dd {
  font-family: var(--font-head); font-weight: 800; font-size: 19px; margin: 2px 0 0; line-height: 1.4;
  font-variant-numeric: tabular-nums; min-height: 1.4em;
}
#qbZ0m, #qbZ1m { font-size: 30px; color: #FFD35A; line-height: 1.2; }
.qb-zdl dd .ap { font-size: .5em; margin-inline-start: .15em; }
.qb-zsun { font-size: 14px; color: #D3E2D7; margin-top: 12px; min-height: 4.6em; line-height: 1.65; }
.qb-zuse { font-weight: 700; color: var(--gold-300); margin-top: 8px; font-size: 14.5px; }
.qb-h3 { margin-top: 20px; }
.qb-how { margin: 8px 0 0; padding-inline-start: 22px; color: var(--ink-soft); line-height: 1.85; }
.qb-how li + li { margin-top: 4px; }
.qb-all { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.qb-all summary { cursor: pointer; font-weight: 800; color: var(--green-700); font-family: var(--font-head); }
.qb-tablewrap { overflow-x: auto; margin-top: 10px; }
.qb-ztable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.qb-ztable th, .qb-ztable td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.qb-ztable th { font-size: 12.5px; color: var(--ink-faint); font-weight: 700; }
.qb-ztable td.tl { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.qb-ztable tr.anti td:first-child { color: #2C5282; }
.qb-ztable td:first-child { font-weight: 700; color: var(--green-700); }

/* ---------- products ---------- */
.qb-pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.qb-pcard {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: var(--card); color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.qb-pcard:hover { border-color: var(--green-600); transform: translateY(-2px); }
.qb-pcard img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 10px; }
.qb-pcard b { font-family: var(--font-head); color: var(--green-900); margin-top: 6px; }
.qb-pcard span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.qb-desk { margin-top: 14px; text-align: center; font-size: 14px; }
.qb-desk a { color: var(--green-700); font-weight: 700; }
.qb-desk a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .qb-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qb-sungrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .qb-grid { grid-template-columns: 1fr; gap: 14px; }
  .qb-rose-wrap { max-width: 340px; }
}
@media (max-width: 560px) {
  .qb-pick { min-height: 132px; }            /* the chooser wraps to two rows here */
  .qb-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-sc-time { font-size: 40px; }
  .qb-zcard { min-height: 0; }
  .qb-zsun { min-height: 6.4em; }
  .qb-k { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .qb-fig8-phone { animation: none !important; offset-distance: 25%; }
  .qb-pcard, .qb-phone { transition: none; }
}
@media (forced-colors: active) {
  .qb-turn.ok { forced-color-adjust: none; color: Highlight; }
}
@media print {
  .qb-live, .qb-notes, .qb-daterow, .qb-prod { display: none !important; }
  .qb-zcard { color: #000; background: #fff !important; border-color: #999; }
  .qb-all[open] .qb-tablewrap { overflow: visible; }
}