/* NEOM digital twin. Design system: visayas-sat (VISAYAS SATELLITE, Sea theme): abyss ground, channel panels, reef and shoal
   accents, Bebas Neue display, IBM Plex Mono data, square corners. Noto Kufi Arabic added for Arabic (the system has no Arabic face).
   Status colours are data colours added for the construction layer (they differ in lightness as well as hue). */
:root {
  --abyss: #08232f; --channel: #0e3342; --reef: #2d928c; --reef-on: #277f7a; --shoal: #72c1b1; --sand: #d1d7cb; --canopy: #434f31; --label-ink: #ffffff;
  --surface: var(--abyss); --surface-raised: var(--channel); --ink: #ffffff; --muted: #9cb9b4; --link: var(--shoal);
  --st-operating: #72c1b1; --st-complete: #d1d7cb; --st-uc: #f2b84b; --st-site: #e08a3c; --st-planned: #8fd3ff; --st-hold: #9a8fb0; --st-cancelled: #6f7a78;
  --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; --ar: "Noto Kufi Arabic", system-ui, sans-serif;
  --panel-w: 380px; --line: rgba(114, 193, 177, 0.22);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--surface); color: var(--ink); font: 14px/1.45 var(--body); }
[dir="rtl"] body, [dir="rtl"] .btn, [dir="rtl"] input, [dir="rtl"] select { font-family: var(--ar); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; color: inherit; }
.btn { background: rgba(14, 51, 66, 0.92); border: 1px solid var(--line); color: var(--ink); padding: 6px 10px; border-radius: 2px; cursor: pointer; font-size: 13px; text-align: start; }
.btn:hover { border-color: var(--shoal); }
.btn.on { background: var(--reef-on); border-color: var(--shoal); color: #fff; }   /* white on --reef-on 4.77:1 (WCAG AA) */
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
h2 { font: 20px/1 var(--display); letter-spacing: 0.03em; margin: 16px 0 8px; color: var(--sand); text-transform: uppercase; }
[dir="rtl"] h2 { font-family: var(--ar); font-size: 15px; font-weight: 700; }

#topbar { position: fixed; top: 0; inset-inline: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 16px; z-index: 6; pointer-events: none; }
#topbar > * { pointer-events: auto; }
.brand h1 { margin: 0; font: 40px/0.9 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--label-ink); text-shadow: none; }
[dir="rtl"] .brand h1 { font: 700 26px/1.2 var(--ar); }
.brand .sub { font: 12px/16px var(--mono); letter-spacing: 0.04em; color: var(--sand); margin-top: 4px; background: rgba(8, 35, 47, 0.72); padding: 2px 6px; display: inline-block; }
.tools { display: flex; gap: 6px; margin-inline-end: calc(var(--panel-w) + 8px); }
body.panel-hidden .tools { margin-inline-end: 0; }

#panel { position: fixed; top: 0; inset-inline-end: 0; bottom: 64px; width: var(--panel-w); background: rgba(8, 35, 47, 0.94); border-inline-start: 1px solid var(--line); z-index: 5; display: flex; flex-direction: column; }
body.panel-hidden #panel { display: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
.tab-btn { flex: 1 0 25%; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 4px; font: 17px/1 var(--display); letter-spacing: 0.04em; color: var(--muted); cursor: pointer; text-transform: uppercase; }
[dir="rtl"] .tab-btn { font: 600 12px/1.3 var(--ar); }
.tab-btn.on { color: #fff; border-bottom-color: var(--shoal); }
.tab { display: none; padding: 12px 14px 20px; overflow-y: auto; flex: 1; }
.tab.on { display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 6px; }
.col { display: flex; flex-direction: column; gap: 6px; }
.readout { font: 12px/16px var(--mono); color: var(--muted); margin: 8px 0 0; letter-spacing: 0.02em; }
.chk { display: flex; gap: 8px; align-items: center; margin: 6px 0; color: var(--sand); font-size: 13px; }
.yearrow { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
.yearrow input { flex: 1; accent-color: var(--shoal); }
.yearrow b { font: 26px/1 var(--display); min-width: 52px; }

.card { border: 1px solid var(--line); background: rgba(14, 51, 66, 0.7); padding: 9px 10px; margin-bottom: 8px; cursor: pointer; }
.card:hover { border-color: var(--shoal); }
.card .head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.card .nm { font-weight: 600; }
.card .sub2 { font: 11px/15px var(--mono); color: var(--muted); margin-top: 2px; }
.card .facts { font-size: 12.5px; color: var(--sand); margin-top: 4px; }
.card .src { font: 11px/15px var(--mono); color: var(--muted); margin-top: 4px; word-break: break-word; }
.card.nogeo { cursor: default; opacity: 0.85; }
.chip { font: 11px/1 var(--mono); padding: 3px 6px; border-radius: 2px; white-space: nowrap; color: #08232f; background: var(--c, var(--muted)); }
.group-h { font: 12px/16px var(--mono); color: var(--shoal); letter-spacing: 0.06em; text-transform: uppercase; margin: 14px 0 6px; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12.5px; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; background: var(--c); vertical-align: -1px; }
.stages { border-inline-start: 2px solid var(--reef); padding-inline-start: 10px; }
.stage { margin-bottom: 10px; }
.stage b { font: 20px/1 var(--display); color: var(--shoal); margin-inline-end: 6px; }
.stage .txt { font-size: 12.5px; color: var(--sand); }
.layers { list-style: none; margin: 0; padding: 0; }
.layers li { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(114, 193, 177, 0.1); }
.layers label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.layers .count { font: 11px/1 var(--mono); color: var(--muted); }
table.mini { width: 100%; border-collapse: collapse; font: 12px/16px var(--mono); }
table.mini th, table.mini td { text-align: start; padding: 3px 4px; border-bottom: 1px solid rgba(114, 193, 177, 0.12); }
table.mini th { color: var(--muted); font-weight: 400; }
.note { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 8px 0 10px; }
#about p, #about li { font-size: 12.5px; color: var(--sand); }
#about a { color: var(--link); }
#about code { font: 11.5px var(--mono); }

#timeline { position: fixed; bottom: 0; inset-inline: 0; height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: rgba(8, 35, 47, 0.95); border-top: 1px solid var(--line); z-index: 6; }
#timeline .track { position: relative; flex: 1; height: 40px; }
#timeline input[type=range] { position: absolute; inset: 14px 0 auto 0; width: 100%; accent-color: var(--shoal); margin: 0; }
#hour-ticks { position: absolute; inset: 0; pointer-events: none; }
#hour-ticks .tick { position: absolute; top: 4px; width: 1px; height: 6px; background: var(--muted); opacity: 0.5; }
#hour-ticks .tick.big { height: 9px; opacity: 0.9; }
#hour-ticks .tick span { position: absolute; top: 26px; transform: translateX(-50%); font: 10px var(--mono); color: var(--muted); }
#clock { font: 30px/1 var(--display); min-width: 64px; }
#timeline input[type=date], #timeline select { background: var(--channel); color: var(--ink); border: 1px solid var(--line); padding: 5px; font: 12px var(--mono); border-radius: 2px; }

#info { position: fixed; top: 96px; inset-inline-start: 16px; width: min(360px, calc(100vw - 32px)); max-height: 46vh; overflow-y: auto; background: rgba(8, 35, 47, 0.95); border: 1px solid var(--shoal); padding: 12px 14px; z-index: 6; }
#info.hidden { display: none; }
#info .x { position: absolute; top: 4px; inset-inline-end: 6px; background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; }
#info h2 { margin: 0 24px 4px 0; font: 26px/0.95 var(--display); letter-spacing: 0.02em; }
[dir="rtl"] #info h2 { font: 700 18px/1.3 var(--ar); margin: 0 0 4px 24px; }
#info .facts li { font-size: 12.5px; color: var(--sand); }
#info .facts { padding-inline-start: 18px; margin: 6px 0; }
#info .src, #info .coord { font: 11px/15px var(--mono); color: var(--muted); word-break: break-word; }
#info .src a { color: var(--link); }

#heli-hud { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 6; text-align: center; font: 12px/16px var(--mono); }
#heli-hud.hidden { display: none; }
#heli-read { font: 28px/1 var(--display); background: rgba(8, 35, 47, 0.8); padding: 4px 10px; display: inline-block; }
#heli-hud .keys { color: var(--sand); background: rgba(8, 35, 47, 0.7); padding: 2px 8px; margin-top: 4px; }
#heli-hud .pad { display: none; gap: 6px; justify-content: center; margin-top: 8px; }
#heli-hud .pad button { width: 46px; height: 46px; background: rgba(14, 51, 66, 0.9); border: 1px solid var(--shoal); font-size: 18px; border-radius: 2px; }

/* markers and labels (CSS2D) */
.mk { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 5px; transform: translateY(-50%); }
.mk i { width: 11px; height: 11px; background: var(--c); border: 1px solid rgba(8, 35, 47, 0.9); flex: none; }
.mk-regions i { width: 15px; height: 15px; }
.mk-airports i { border-radius: 50%; width: 13px; height: 13px; }
.mk-lifts i { transform: rotate(45deg); }
.mk span { font: 11px/1.2 var(--mono); color: #fff; background: rgba(8, 35, 47, 0.78); padding: 1px 5px; white-space: nowrap; }
.mk-regions span { font: 17px/1 var(--display); letter-spacing: 0.04em; padding: 2px 6px; text-transform: uppercase; }
[dir="rtl"] .mk-regions span { font: 700 13px/1.3 var(--ar); }
.mk.quiet span { display: none; }
.mk:hover span { display: inline; }
.lbl { font: 11px/1.2 var(--mono); color: #fff; background: rgba(8, 35, 47, 0.6); padding: 1px 5px; white-space: nowrap; pointer-events: none; }
.lbl.big { font: 24px/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; background: none; color: var(--label-ink); }
[dir="rtl"] .lbl.big { font: 700 16px/1.3 var(--ar); }
.lbl.mid { font-size: 12px; background: rgba(8, 35, 47, 0.75); }
.no-labels .lbl { display: none; }
.lbl.clash, .mk.clash span { visibility: hidden; }   /* overlap with a higher-priority text (labels.js declutter) */
.mk.clash:hover span { visibility: visible; }

#loading { position: fixed; inset: 0; background: var(--abyss); z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity 0.6s; }
#loading.done { opacity: 0; pointer-events: none; }
.load-viz { width: min(600px, 86vw); height: auto; }
.load-viz .coast { fill: none; stroke: var(--sand); stroke-width: 1.5; opacity: 0.6; }
.load-viz .line-axis { stroke: var(--shoal); stroke-width: 3; stroke-dasharray: 6 5; animation: dash 1.6s linear infinite; }
.load-viz .dot { fill: var(--st-uc); }
.load-viz .t { font: 14px var(--display); fill: #fff; letter-spacing: 0.06em; }
@keyframes dash { to { stroke-dashoffset: -22; } }
#loading .lt { font: 12px var(--mono); color: var(--muted); }
#loading .bar { width: min(420px, 70vw); height: 3px; background: var(--channel); }
#loadbar { height: 100%; width: 3%; background: var(--shoal); transition: width 0.3s; }
#hint { position: fixed; bottom: 92px; inset-inline-start: 16px; max-width: calc(100vw - var(--panel-w) - 48px); z-index: 4; font: 12px/16px var(--mono); color: var(--sand); background: rgba(8, 35, 47, 0.86); border-inline-start: 2px solid var(--shoal); padding: 5px 9px; pointer-events: none; }
#hint.hidden { display: none; }
body.panel-hidden #hint { max-width: calc(100vw - 32px); }
#buildinfo { position: fixed; bottom: 70px; inset-inline-start: 12px; font: 10px var(--mono); color: var(--muted); z-index: 4; background: rgba(8, 35, 47, 0.6); padding: 1px 5px; }

/* phones: bottom sheet with the tab strip at the bottom, 3D view above it, no page scroll */
@media (max-width: 899px) {
  :root { --panel-w: 100vw; }
  .brand h1 { font-size: 28px; }
  .brand .sub { font-size: 10px; }
  .tools { margin-inline-end: 0; }
  #panel { top: auto; bottom: 56px; height: 42vh; width: 100%; border-inline-start: 0; border-top: 1px solid var(--line); flex-direction: column-reverse; }
  .tabs { border-bottom: 0; border-top: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; }
  .tab-btn { flex: 0 0 auto; padding: 10px 10px; font-size: 15px; }
  #timeline { height: 56px; gap: 6px; padding: 0 8px; }
  #timeline select, #timeline #now { display: none; }
  #timeline input[type=date] { width: 112px; }
  #clock { font-size: 22px; min-width: 46px; }
  #info { top: 72px; max-height: 30vh; }
  #buildinfo { display: none; }
  #hint { bottom: calc(42vh + 64px); inset-inline: 12px; max-width: none; font-size: 11px; line-height: 15px; }
  #heli-hud { top: 70px; }
  #heli-hud .pad { display: flex; }
  #heli-hud .keys { display: none; }
}

/* right-to-left: CSS2D elements are positioned from the left edge, so their container stays LTR; each text keeps its own
   direction (Arabic names right to left, English facts left to right) */
#labels { direction: ltr; }
.lbl, .mk span { unicode-bidi: plaintext; }
.card .nm, .card .facts, .card .sub2, .card .src, .stage .txt, #info .facts li, #info h2 { unicode-bidi: plaintext; }

/* Arabic: IBM Plex Mono has no Arabic glyphs and its letter spacing breaks Arabic joining; in right-to-left mode the mono
   elements with Arabic text use Noto Kufi Arabic without letter spacing */
[dir="rtl"] .brand .sub, [dir="rtl"] .readout, [dir="rtl"] #loading .lt, [dir="rtl"] .group-h, [dir="rtl"] .chip, [dir="rtl"] .card .sub2, [dir="rtl"] #hint { font-family: var(--ar); letter-spacing: 0; }
[dir="rtl"] .brand .sub { font-size: 12px; line-height: 20px; }