/* App styles. Values only from tokens.css (design/tokens.json). Rules lifted from
   design/screens/qibla.html. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-base); }
:lang(ar) body, body:lang(ar) { line-height: var(--lh-arabic); }
[hidden] { display: none !important; }

.app { container-type: size; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.hdr { display: flex; justify-content: space-between; align-items: center; padding: var(--s2); }
.hbtn { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--touch); min-width: var(--touch);
  padding: 0 var(--s3); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.hbtn:hover { background: var(--surface-sunken); }
.main { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s2) var(--s4) var(--s5);
  width: 100%; max-width: var(--content-max); margin: 0 auto; }
.main > * { flex-shrink: 0; }
.grow { flex: 1; }
.center { text-align: center; align-items: center; }
h1, h2, p { margin: 0; }
.title { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); }
.h2 { font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-tight); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
svg.i { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
svg.i.hero { width: var(--s8); height: var(--s8); color: var(--primary); }
.kaaba-big { width: calc(var(--s8) * 2); height: calc(var(--s8) * 2); }
.sprite { position: absolute; width: 0; height: 0; }

:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }

.btn-primary { display: flex; align-items: center; justify-content: center; gap: var(--s3); width: 100%; min-height: var(--btn-h);
  padding: 0 var(--s5); border: 0; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary);
  font: inherit; font-size: var(--fs-xl); font-weight: 700; box-shadow: var(--sh-button); cursor: pointer; }
.btn-primary:active { background: var(--primary-pressed); }
.btn-primary.secondary { min-height: var(--touch); font-size: var(--fs-base); background: var(--surface); color: var(--primary);
  border: 2px solid var(--primary); box-shadow: none; }

.card { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r-md);
  border: 2px solid; text-align: start; }
.card .h { font-weight: 700; }
.card p { font-size: var(--fs-sm); }
.card.warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.card.danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.card.plain { background: var(--surface); border-color: var(--border); color: var(--text); }

.readout { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: center;
  line-height: var(--lh-tight); } /* one-line labels, like .status .big (DEF-004) */
.readout .deg { font-size: var(--fs-display); font-weight: 700; line-height: 1; }
.readout .point { font-size: var(--fs-lg); font-weight: 700; }
.readout .mag { margin-top: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--border); width: 100%; }
.notice-row { display: flex; gap: var(--s2); align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--text-muted); }

/* SCR-004 dial (ADR-010): static markup, rotated only through the SVG transform attribute */
.dialwrap { display: flex; justify-content: center; }
.dial { width: min(80cqw, 46cqh, 340px); max-width: 100%; max-height: 100%; aspect-ratio: 1; }
/* the dial absorbs what the text leaves: its row may shrink (to a floor) and the SVG letterboxes
   to the shorter box, so other fonts' line heights never scroll the main area (DEF-004) */
.main > .dialwrap { flex-shrink: 1; min-height: calc(var(--s8) * 2.5); }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial .ring { fill: var(--dial); stroke: var(--border-strong); stroke-width: 2; }
.dial .tick { stroke: var(--dial-tick); stroke-width: 1.5; }
.dial .tick.major { stroke-width: 2.5; }
.dial .card-l { fill: var(--text); font: 700 15px var(--font); text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: var(--dial); stroke-width: 4px; }
.dial .card-l.n { fill: var(--dial-north); font-size: 18px; }
.dial .needle { stroke: var(--primary); stroke-width: 4; stroke-linecap: round; }
.dial .badge { fill: var(--dial); stroke: var(--primary); stroke-width: 2.5; }
.dial .kaaba { fill: var(--kaaba); stroke: var(--kaaba-edge); stroke-width: 1; }
.dial .band { fill: var(--kaaba-band); }
.dial .hub { fill: var(--text); }
.dial .pointer { fill: var(--text); }
.dial.aligned .ring { stroke: var(--aligned); stroke-width: var(--bw-aligned-ring); }
.dial.aligned .pointer { fill: var(--aligned); }
.dial.aligned .needle { stroke: var(--aligned); }
.dial.aligned .badge { stroke: var(--aligned); stroke-width: 3.5; }
.dial.aligned svg { animation: pulse 1.2s var(--ease) 1; }
@keyframes pulse { 50% { transform: scale(1.03); } }
.dial.dim { opacity: 0.4; }
/* compact dial whenever a warning card, the city line or a notice is showing */
.main:has(.card:not([hidden]), .context:not([hidden]), .notice-row:not([hidden])) .dial { width: min(64cqw, 32cqh, 260px); }
/* and tighter spacing, so SCR-004/006 fit 360x640 without scrolling (ADR-010, DEF-004) */
.main:has(.card:not([hidden]), .context:not([hidden]), .notice-row:not([hidden])) { gap: var(--s2); padding-bottom: var(--s3); }
/* with a warning card, SCR-006 has no dial to absorb its length: tighter card and readout,
   smaller degrees (DEF-004) */
.main:has(.card.warn:not([hidden])) .card { padding: var(--s3); }
.main:has(.card.warn:not([hidden])) .readout { gap: 0; padding: var(--s3); }
.main:has(.card.warn:not([hidden])) .readout .deg { font-size: var(--fs-2xl); }

/* status line: dir=ltr so the arrow sits on the physical side you turn, in both languages */
.status { display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: calc(var(--s8) + var(--s2));
  padding: var(--s3) var(--s4); border-radius: var(--r-md); }
.status .txt { text-align: center; }
.status .big { display: block; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); }
.status .sub { display: block; font-size: var(--fs-base); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.status svg.i { width: var(--s7); height: var(--s7); stroke-width: 2.5; color: var(--primary); }
.status.ok { background: var(--aligned-bg); color: var(--aligned-text); }
.status.ok svg.i { color: var(--aligned); }
.bearing-s { text-align: center; }
.link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--touch); padding: 0 var(--s2);
  border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.spin { width: var(--s7); height: var(--s7); border-radius: 50%; border: var(--s1) solid var(--border); border-top-color: var(--primary);
  animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin, .dial.aligned svg { animation: none; } }

/* sheets: <dialog> opened with showModal() only (ADR-010 s.1) */
dialog.sheet { width: 100%; max-width: var(--content-max); max-height: 85%; margin: auto auto 0; overflow: auto; border: 0;
  background: var(--surface); color: var(--text); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-sheet);
  padding: var(--s5) var(--s4) var(--s4); }
dialog.sheet[open] { display: flex; flex-direction: column; gap: var(--s4); }
dialog.sheet::backdrop { background: var(--scrim); }
dialog.sheet ul { margin: 0; padding-inline-start: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }

/* desktop variant of SCR-006 (ADR-010 s.1): CSS only */
.desktop-only { display: none; }
@media (hover: hover) and (pointer: fine) {
  .desktop-only { display: flex; }
  dialog.sheet { margin: auto; border-radius: var(--r-lg); }
}
.urlbox { padding: var(--s3) var(--s4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); font-weight: 700; }

/* SCR-004/006 city line */
.context { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  font-size: var(--fs-sm); color: var(--text-muted); border-bottom: 1px solid var(--border); }
.context .link { font-size: var(--fs-sm); }

/* SCR-005 search */
.field label { display: block; font-weight: 700; margin-bottom: var(--s2); }
.input { display: flex; align-items: center; gap: var(--s2); min-height: calc(var(--touch) + var(--s2)); padding: 0 var(--s3);
  background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--r-md); }
.input:focus-within { outline: var(--focus-w) solid var(--focus); outline-offset: 1px; }
.input:has(input:disabled) { opacity: 0.6; }
.input input { flex: 1; align-self: stretch; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit;
  font-size: var(--fs-lg); outline: none; }
.results { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  overflow: hidden; }
.results li + li { border-top: 1px solid var(--border); }
.results button { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: calc(var(--touch) + var(--s2));
  padding: var(--s2) var(--s4); border: 0; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.results button:hover { background: var(--surface-sunken); }
.results .ctry { color: var(--text-muted); font-size: var(--fs-sm); }
.credit { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
.credit a { color: inherit; }
.card.mid { align-items: center; }
.spin.sm { width: var(--s6); height: var(--s6); border-width: var(--s1); }