/* Qiddiya City digital twin: UI styles.
   Design system: VISAYAS SATELLITE (owner's register, short name visayas-sat), Sea (dark) theme; tokens from its tokens.json.
   Project additions: Noto Kufi Arabic for Arabic and Noto Sans SC for Chinese (the system has no Arabic or CJK face).
   Placeholder boxes print their size in Silkscreen (owner's rule). Panels are tabbed: no page scrolling on phones. */
:root {
  --abyss: #08232f; --channel: #0e3342; --reef: #2d928c; --shoal: #72c1b1; --sand: #d1d7cb; --canopy: #434f31;
  --badge: #0b0b0b; --label-ink: #ffffff;
  --reef-deep: #1d6b66;   /* filled active states: white text 6.3:1 (reef #2d928c gave 3.7:1, Lighthouse colour-contrast, review v01) */
  --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;
  --cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --pixel: "Silkscreen", monospace;
  --panel-w: 340px; --timeline-h: 72px; --top-h: 84px;   /* --top-h follows the real header height (ui.js watchTopbar) */
}
: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); }
html[lang="zh"] body { font-family: var(--cjk); }
#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; }
html[lang="zh"] h1, html[lang="zh"] h2 { font-family: var(--cjk); font-weight: 700; letter-spacing: 0.06em; }
h1 { font-size: 28px; 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; }
.text { margin: 0 0 8px; font-size: 12.5px; color: var(--ink); }
.sub { color: var(--muted); font-size: 11px; font-family: var(--mono); white-space: normal; }
html[lang="ar"] .sub, html[lang="ar"] .note, html[lang="ar"] .btn, html[lang="ar"] .chip { font-family: var(--arabic); }
html[lang="zh"] .sub, html[lang="zh"] .note, html[lang="zh"] .btn, html[lang="zh"] .chip { font-family: var(--cjk); }

#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: 5; }
#topbar > * { pointer-events: auto; }
.brand { max-width: min(58vw, 620px); 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; }
.langs { display: flex; }
.langs .btn { padding: 6px 8px; min-width: 44px; }
.langs .btn + .btn { border-inline-start: 0; }

.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-deep); color: var(--label-ink); }
.btn.active, .btn.on { background: var(--reef-deep); color: var(--label-ink); }
.btn.icon { font-size: 14px; min-width: 36px; }
.btn:focus-visible, input:focus-visible, select:focus-visible, .tab-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* panel with tabs */
#panel { position: fixed; top: calc(var(--top-h) + 4px); bottom: calc(var(--timeline-h) + 8px); inset-inline-start: 0; width: var(--panel-w); display: flex; flex-direction: column; z-index: 4; padding: 0 var(--space-2); }
#tabs { display: flex; gap: 2px; margin-bottom: 6px; }
.tab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid color-mix(in srgb, var(--reef) 45%, transparent); border-radius: var(--radius-0); cursor: pointer; }
.tab-btn .ico { font-size: 14px; line-height: 1; color: var(--shoal); }
.tab-btn.on { color: var(--label-ink); background: var(--reef-deep); border-color: var(--reef); }
.tab-btn.on .ico { color: var(--label-ink); }
html[lang="ar"] .tab-btn { font-family: var(--arabic); }
html[lang="zh"] .tab-btn { font-family: var(--cjk); }
.tab { display: none; flex: 1; min-height: 0; overflow-y: auto; flex-direction: column; gap: var(--space-1); scrollbar-width: thin; }
.tab.on { display: flex; }
.tab section { background: color-mix(in srgb, var(--surface) 88%, 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: 100px; text-align: end; }
.chip { font-family: var(--mono); font-size: 10px; padding: 1px 6px; background: var(--reef); color: var(--label-ink); border-radius: var(--radius-sm); white-space: nowrap; }
.chip.quiet { background: var(--surface-raised); color: var(--muted); border: 1px solid var(--reef); }
.chip.gold { background: #8a6a3e; }
.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: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1px 8px; color: var(--muted); }
.stats b { color: var(--sand); font-weight: 400; text-align: end; overflow-wrap: anywhere; }

/* rides list and venue cards */
.rides { display: flex; flex-direction: column; gap: 3px; }
.ride { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--reef) 35%, transparent); cursor: pointer; }
.ride:hover { background: color-mix(in srgb, var(--reef) 18%, transparent); }
.ride .nm { font-family: var(--display); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1; }
html[lang="ar"] .ride .nm { font-family: var(--arabic); text-transform: none; font-size: 14px; }
html[lang="zh"] .ride .nm { font-family: var(--cjk); font-size: 14px; }
.ride .nm.record { color: var(--shoal); }
.ride .facts { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ride .land { font-family: var(--mono); font-size: 10px; color: var(--sand); text-align: end; white-space: nowrap; }
.ride.unplaced { opacity: 0.6; cursor: default; }
.cards { display: flex; flex-direction: column; gap: 4px; }
.card { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--reef) 35%, transparent); cursor: pointer; }
.card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card .nm { font-family: var(--display); font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
html[lang="ar"] .card .nm { font-family: var(--arabic); text-transform: none; font-size: 14px; }
html[lang="zh"] .card .nm { font-family: var(--cjk); font-size: 14px; }
.card .facts { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.card.nogeo { cursor: default; opacity: 0.75; }

.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; max-width: 320px; }
.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; height: var(--timeline-h); 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: 40px; }
#time { position: absolute; left: 0; right: 0; top: 8px; width: 100%; margin: 0; accent-color: var(--shoal); }
#hour-ticks { position: absolute; left: 0; right: 0; top: 30px; height: 10px; pointer-events: none; }
#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"] #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: 20; transition: opacity 0.4s; padding: 16px; }
#loading.done { opacity: 0; pointer-events: none; }
/* poster: a clean frame of the twin (also the Open Graph image), shown while the model builds */
#loading .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.load-card { position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 16px 20px; max-width: min(100%, 440px); background: color-mix(in srgb, var(--surface) 84%, transparent); border-inline-start: 3px solid var(--reef); }
.load-title { font-family: var(--display); font-size: 34px; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; }
.load-langs { font-size: 15px; color: var(--sand); }
/* system faces here: the web fonts for Arabic and Chinese load only when that language is chosen */
.load-langs [lang="ar"] { font-family: "Geeza Pro", Tahoma, sans-serif; } .load-langs [lang="zh"] { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
#loadhint { color: var(--sand); font-size: 11px; }
#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: calc(var(--timeline-h) + 2px); inset-inline-start: 50%; transform: translateX(-50%); color: var(--sand); font-size: 11px; pointer-events: none; z-index: 4; white-space: nowrap; padding: 2px 8px; background: color-mix(in srgb, var(--surface) 78%, transparent); }
html[dir="rtl"] #hint { transform: translateX(50%); }

body.panel-hidden #panel { display: none; }
@media (max-width: 900px) {
  :root { --panel-w: 100%; --timeline-h: 64px; }
  #topbar { padding: 8px 12px; }
  .brand { max-width: 62vw; padding: 6px 10px; }
  h1 { font-size: 20px; }
  .sub { display: none; }
  #clock { display: none; }
  .langs .btn { min-width: 38px; padding: 5px 6px; font-size: 11px; }
  #panel-toggle { display: none; }
  /* bottom sheet: tab strip at the bottom, content above it, no page scrolling */
  #panel { top: auto; bottom: var(--timeline-h); height: 42vh; max-height: 360px; width: 100%; inset-inline: 0; padding: 0 12px; flex-direction: column-reverse; }
  #tabs { margin: 6px 0 0; }
  .tab-btn { padding: 5px 2px calc(5px + env(safe-area-inset-bottom) / 2); font-size: 10px; }
  .tab section { padding: 8px 10px; }
  .ride .nm { font-size: 15px; }
  #hint { display: none; }
  #timeline { padding: 8px 12px 10px; }
  #speed { display: none; }
  /* labels stop at the top of the bottom sheet instead of showing through the tab strip and the timeline */
  #labels { clip-path: inset(0 0 calc(min(42vh, 360px) + var(--timeline-h)) 0); }
  /* folded sheet: tab strip only; the open tab shows which way it folds */
  body.sheet-collapsed #panel { height: auto; }
  body.sheet-collapsed .tab.on { display: none; }
  body.sheet-collapsed #labels { clip-path: inset(0 0 calc(var(--timeline-h) + 52px) 0); }
  .tab-btn.on::after { content: '▾'; font-size: 9px; line-height: 1; }
  body.sheet-collapsed .tab-btn.on::after { content: '▴'; }
}
/* 3D labels (CSS2DRenderer): place labels over imagery in white condensed caps, no box (design-system rule); ride labels small with a rule */
.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--label-ink); padding: 1px 6px; white-space: nowrap; border-inline-start: 2px solid var(--shoal); background: color-mix(in srgb, var(--abyss) 62%, transparent); }
.lbl.big { font-family: var(--display); font-size: 26px; letter-spacing: 0.06em; text-transform: uppercase; border: 0; background: none; padding: 0; text-shadow: none; }
.lbl.mid { font-family: var(--display); font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; border: 0; background: none; padding: 0; opacity: 0.92; }
.lbl.small { font-size: 10px; opacity: 0.9; }
.lbl.record { border-inline-start-color: #ffb45e; }
.lbl.dir { font-family: var(--display); font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; border: 0; background: none; padding: 0; color: var(--shoal); }
html[lang="ar"] .lbl, html[lang="ar"] .lbl.big, html[lang="ar"] .lbl.mid, html[lang="ar"] .lbl.dir { font-family: var(--arabic); text-transform: none; font-weight: 700; }
html[lang="zh"] .lbl, html[lang="zh"] .lbl.big, html[lang="zh"] .lbl.mid, html[lang="zh"] .lbl.dir { font-family: var(--cjk); font-weight: 700; }
body.no-labels #labels { display: none; }
.lbl.lbl-hid { visibility: hidden; }   /* hidden by the declutter pass in labels.js */
@media (min-width: 901px) { #labels { clip-path: inset(0 0 var(--timeline-h) 0); } }   /* not under the timeline */
/* CSS2DRenderer positions labels by transform from the container's left edge; in RTL an absolute box without left/top
   takes its static position at the right edge, which pushed every Arabic label off to the right (review v01) */
#labels { direction: ltr; }
#labels > .lbl { left: 0; top: 0; }
html[dir="rtl"] #labels > .lbl { direction: rtl; }
#speed { direction: ltr; }   /* '10 min/s' stays in reading order in Arabic */