/* Masjid al-Haram digital twin: UI styles.
   Design system: VISAYAS SATELLITE (owner's register, short name visayas-sat), Sea (dark) theme.
   Tokens from its tokens.json; the system has no Arabic face, so Noto Kufi Arabic is added for Arabic text (project addition).
   Placeholder boxes print their size in Silkscreen (owner's rule). */
:root {
  --abyss: #08232f; --channel: #0e3342; --reef: #2d928c; --shoal: #72c1b1; --sand: #d1d7cb; --canopy: #434f31;
  --badge: #0b0b0b; --label-ink: #ffffff;
  --surface: var(--abyss); --surface-raised: var(--channel); --ink: #ffffff; --muted: #9cb9b4; --link: var(--shoal);
  --space-1: 8px; --space-2: 16px; --space-3: 48px; --radius-0: 0; --radius-sm: 2px;
  --display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "Noto Kufi Arabic", "Geeza Pro", "Tahoma", sans-serif;
  --pixel: "Silkscreen", monospace;
  --panel-w: 300px;
}
:root[data-theme="light"] { --surface: #f1f3ee; --surface-raised: #ffffff; --ink: #08232f; --muted: #4b605c; --link: #1d6b66; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--surface); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.45; overflow: hidden; }
html[lang="ar"] body { font-family: var(--arabic); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; margin: 0; }
html[lang="ar"] h1, html[lang="ar"] h2 { font-family: var(--arabic); font-weight: 700; text-transform: none; letter-spacing: 0; }
h1 { font-size: 26px; line-height: 0.95; }
h2 { font-size: 18px; line-height: 1; color: var(--sand); margin-bottom: var(--space-1); padding-bottom: 4px; border-bottom: 1px solid var(--reef); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.note { color: var(--muted); font-size: 11px; margin-top: 6px; }
.sub { color: var(--muted); font-size: 11px; font-family: var(--mono); white-space: normal; }

#topbar { position: fixed; top: 0; inset-inline: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 12px var(--space-2); gap: var(--space-2); pointer-events: none; z-index: 6; }
#topbar > * { pointer-events: auto; }
.brand { max-width: min(60vw, 560px); background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 8px 12px; border-inline-start: 3px solid var(--reef); }
.topbar-right { display: flex; gap: var(--space-1); align-items: center; }
#clock { font-size: 22px; color: var(--sand); background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 6px 10px; }

.btn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--reef); border-radius: var(--radius-0); padding: 6px 10px; cursor: pointer; }
.btn:hover { background: var(--reef); color: var(--label-ink); }
.btn.active { background: var(--reef); color: var(--label-ink); }
.btn.icon { font-size: 14px; min-width: 36px; }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.panel { position: fixed; top: calc(var(--top, 64px) + 4px); bottom: calc(var(--bottom, 70px) + 26px); width: var(--panel-w); overflow-y: auto; padding: 0 var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); z-index: 4; scrollbar-width: thin; }
#left { inset-inline-start: 0; }
#right { inset-inline-end: 0; }
.panel section { background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid color-mix(in srgb, var(--reef) 45%, transparent); padding: 10px 12px; }
.kv { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.kv > span:first-child { color: var(--muted); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; }
.row label { color: var(--muted); }
input[type="date"], input[type="number"], select { font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--reef); padding: 4px 6px; max-width: 150px; }
input[type="number"] { width: 110px; text-align: end; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { font-family: var(--mono); font-size: 11px; padding: 2px 6px; background: var(--reef); color: var(--label-ink); border-radius: var(--radius-sm); }
.chip.quiet { background: var(--surface-raised); color: var(--muted); border: 1px solid var(--reef); }
html[lang="ar"] .chip, html[lang="ar"] .btn, html[lang="ar"] .note { font-family: var(--arabic); }
/* Arabic letters must join: no letter spacing on Arabic text; Latin digits stay in the mono face, Arabic letters fall back to Noto Kufi Arabic */
html[lang="ar"] .mono, html[lang="ar"] .btn, html[lang="ar"] .chip, html[lang="ar"] #prayer-marks .mark, html[lang="ar"] .lbl { letter-spacing: 0; }
html[lang="ar"] .mono, html[lang="ar"] #prayer-marks .mark { font-family: "IBM Plex Mono", "Noto Kufi Arabic", ui-monospace, monospace; }
#prayers { width: 100%; border-collapse: collapse; }
#prayers td { padding: 2px 0; }
#prayers td:last-child { text-align: end; color: var(--sand); }
#prayers tr.next td { color: var(--shoal); }
#prayers tr.current td:first-child { color: var(--shoal); }
.layers { list-style: none; margin: 0; padding: 0; }
.layers li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.layers label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.layers input { accent-color: var(--reef); }
.layers .count { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.btns { display: flex; flex-wrap: wrap; gap: 4px; }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; color: var(--muted); }
.stats b { color: var(--sand); font-weight: 400; text-align: end; }

.placeholder { position: relative; margin-top: 8px; background: repeating-linear-gradient(45deg, var(--surface-raised) 0 8px, var(--surface) 8px 16px); border: 1px dashed var(--reef); display: grid; place-items: center; }
.placeholder span { font-family: var(--pixel); font-size: 8px; color: var(--sand); -webkit-font-smoothing: none; font-smooth: never; letter-spacing: 0; }

#timeline { position: fixed; bottom: 0; inset-inline: 0; display: flex; align-items: center; gap: var(--space-1); padding: 10px var(--space-2) 14px; background: linear-gradient(to top, color-mix(in srgb, var(--surface) 92%, transparent), transparent); z-index: 5; }
.slider-wrap { position: relative; flex: 1; height: 44px; }
#time { position: absolute; left: 0; right: 0; top: 14px; width: 100%; margin: 0; accent-color: var(--shoal); }
#prayer-marks, #hour-ticks { position: absolute; left: 0; right: 0; pointer-events: none; }
#prayer-marks { top: 0; height: 14px; }
#hour-ticks { top: 34px; height: 10px; }
#prayer-marks .mark { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 9px; color: var(--shoal); white-space: nowrap; }
#prayer-marks .mark::after { content: ""; position: absolute; left: 50%; top: 12px; width: 1px; height: 6px; background: var(--shoal); }
#hour-ticks .tick { position: absolute; top: 0; width: 1px; height: 4px; background: var(--muted); }
#hour-ticks .tick.big { height: 8px; }
#hour-ticks .tick span { position: absolute; top: 8px; transform: translateX(-50%); font-family: var(--mono); font-size: 9px; color: var(--muted); }
html[dir="rtl"] #prayer-marks .mark, html[dir="rtl"] #hour-ticks .tick span { transform: translateX(50%); }
#timelabel { font-size: 20px; color: var(--sand); min-width: 64px; text-align: center; }

#loading { position: fixed; inset: 0; display: grid; place-content: center; gap: 8px; background: var(--surface); z-index: 5; transition: opacity 0.4s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .bar { width: 240px; height: 4px; background: var(--surface-raised); }
#loadbar { height: 100%; width: 0; background: var(--shoal); transition: width 0.2s; }
#loadtext { color: var(--muted); text-align: center; }
#hint { position: fixed; bottom: 70px; inset-inline-start: 50%; transform: translateX(-50%); color: var(--muted); font-size: 11px; pointer-events: none; opacity: 0.8; z-index: 4; white-space: nowrap; }
html[dir="rtl"] #hint { transform: translateX(50%); }
body.touched #hint { opacity: 0; transition: opacity 0.6s; }

body.panels-hidden .panel { display: none; }
.phone-only { display: none; }
/* Phones and narrow windows: the 3D view first. Panels are closed at start; Info opens the left panel, Layers the right one, one at a time.
   Text is 12 px or larger (Lighthouse legible-font check); the timeline takes two rows so the prayer marks have room. */
@media (max-width: 900px) {
  :root { --panel-w: 100%; }
  .phone-only { display: inline-block; }
  .desktop-only { display: none; }
  #topbar { padding: 8px 10px; gap: 8px; }
  .brand { max-width: none; flex: 1 1 auto; min-width: 0; padding: 6px 10px; }
  h1 { font-size: 18px; line-height: 1; }
  .topbar-right { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  #clock { display: none; }
  .btn { font-size: 13px; padding: 7px 10px; min-height: 36px; }
  #hint { bottom: calc(var(--bottom, 96px) + 8px); font-size: 12px; white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 20px); background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 4px 8px; }
  body.show-left #hint, body.show-right #hint { display: none; }
  .sub { display: none; }
  .panel, body.panels-hidden .panel { display: none; top: auto; bottom: calc(var(--bottom, 96px) + 4px); max-height: calc(100% - var(--top, 64px) - var(--bottom, 96px) - 12px); width: 100%; inset-inline: 0; padding: 0 10px; gap: 10px; }
  body.show-left #left, body.show-right #right { display: flex; }
  .mono, .note, .chip, .layers .count, input[type="date"], input[type="number"], select { font-size: 12px; }
  .note { font-size: 12px; }
  #timeline { flex-wrap: wrap; row-gap: 2px; padding: 4px 10px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 90%, transparent); }
  .slider-wrap { order: -1; flex: 1 1 100%; height: 62px; }
  #prayer-marks { height: 30px; }
  #prayer-marks .mark { font-size: 12px; }
  #prayer-marks .mark.alt { top: 14px; }
  #prayer-marks .mark::after { top: 15px; height: 6px; }
  #prayer-marks .mark.alt::after { top: 15px; height: 2px; }
  #time { top: 32px; }
  #hour-ticks { top: 48px; }
  #hour-ticks .tick span { font-size: 12px; }
  #timelabel { font-size: 18px; margin-inline-start: auto; }
  #labels .lbl, #labels .lbl.small { font-size: 12px; }
  #labels .lbl.big { font-size: 18px; }
}
/* 3D labels (CSS2DRenderer) */
.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--label-ink); background: color-mix(in srgb, var(--abyss) 72%, transparent); padding: 2px 6px; white-space: nowrap; border-inline-start: 2px solid var(--shoal); }
.lbl.big { font-family: var(--display); font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; border-inline-start-color: var(--sand); }
.lbl.small { font-size: 10px; opacity: 0.85; }
html[lang="ar"] .lbl, html[lang="ar"] .lbl.big { font-family: var(--arabic); text-transform: none; }
body.no-labels #labels { display: none; }
/* CSS2DRenderer places labels by transform from the left edge; in an RTL page an absolutely placed element starts at the right edge,
   which pushed the Arabic labels off screen. The layer stays LTR, each label keeps the page direction for its text. */
#labels { direction: ltr; }
#labels .lbl { left: 0; top: 0; }
html[dir="rtl"] #labels .lbl { direction: rtl; }