/* Diriyah twin layout. Brand tokens from ../shared/brand.css (official diriyah.sa palette and fonts); the panels use
   the dark brown theme so the 3D view stays dominant at every time of day. */
:root { --tw-panel: rgba(33, 20, 14, 0.86); --tw-panel-2: rgba(61, 36, 25, 0.72); --tw-ink: #fdfaf7; --tw-ink-2: #d8c2b0; --tw-line: rgba(199, 150, 103, 0.28); --tw-w: 380px; --tw-top: 58px; --tw-bottom: 54px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c120d; color: var(--tw-ink); font: 14px/1.4 'SaudiRiyal', var(--font-ui); -webkit-tap-highlight-color: transparent; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.mini { font-size: 11px; color: var(--tw-ink-2); }

/* top bar */
#top { position: fixed; top: 0; left: 0; right: 0; height: var(--tw-top); z-index: 10; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(28, 18, 13, 0.92), rgba(28, 18, 13, 0.62)); border-bottom: 1px solid var(--tw-line); backdrop-filter: blur(8px); }
.logo { color: var(--dr-cream); display: flex; align-items: center; flex: none; }
#logo-svg svg { width: 104px; height: auto; display: block; }
.titles { min-width: 0; flex: none; }
.titles h1 { margin: 0; font: 700 18px/1.05 var(--font-display); color: var(--dr-sand-light); white-space: nowrap; }
.titles .sub { font-size: 11px; color: var(--tw-ink-2); white-space: nowrap; }
[dir="rtl"] .titles h1 { font-family: var(--font-ui); font-weight: 500; }
#modes { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
#modes::-webkit-scrollbar { display: none; }
.mode { flex: none; border: 1px solid transparent; background: transparent; color: var(--tw-ink-2); font: 500 13px var(--font-ui); padding: 7px 11px; border-radius: var(--radius); cursor: pointer; }
.mode:hover { color: var(--tw-ink); background: rgba(199, 150, 103, 0.12); }
.mode.active { color: #fff; background: var(--btn-grad); box-shadow: var(--shadow); }
.right { display: flex; gap: 8px; align-items: center; flex: none; }
select, input[type="date"], input.text, input.num { background: rgba(253, 250, 247, 0.08); color: var(--tw-ink); border: 1px solid var(--tw-line); border-radius: var(--radius); padding: 6px 8px; font: 13px var(--font-ui); }
select option { color: #1c120d; }
.icon-btn { width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--tw-line); background: rgba(253, 250, 247, 0.06); color: var(--tw-ink); font-size: 15px; cursor: pointer; }
.icon-btn.active { background: var(--btn-grad); color: #fff; }

/* panel */
#panel { position: fixed; z-index: 9; top: calc(var(--tw-top) + 10px); bottom: calc(var(--tw-bottom) + 10px); inset-inline-end: 10px; width: var(--tw-w);
  background: var(--tw-panel); border: 1px solid var(--tw-line); border-radius: 8px; backdrop-filter: blur(10px); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease; }
body.panel-hidden #panel { transform: translateX(calc(var(--tw-w) + 30px)); }
[dir="rtl"] body.panel-hidden #panel { transform: translateX(calc(-1 * (var(--tw-w) + 30px))); }
#panel-grip { display: none; }
#panel-body { overflow-y: auto; padding: 14px 14px 20px; overscroll-behavior: contain; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.panel-head h2 { margin: 0; font-size: 26px; color: var(--dr-sand-light); }
.card { border-top: 1px solid var(--tw-line); padding: 10px 0 12px; }
.card .h { margin: 0 0 8px; font: 500 13px var(--font-ui); letter-spacing: 0.02em; color: var(--dr-sand); text-transform: uppercase; }
[dir="rtl"] .card .h { text-transform: none; letter-spacing: 0; }
.sub-h { margin: 10px 0 4px; font: 500 12px var(--font-ui); color: var(--tw-ink-2); }
.note { margin: 4px 0 8px; color: var(--tw-ink-2); font-size: 12px; }
.note.intro { background: var(--tw-panel-2); border-inline-start: 3px solid var(--dr-sand); padding: 8px 10px; border-radius: 4px; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; }
.row .k { color: var(--tw-ink-2); } .row .v { text-align: end; font-variant-numeric: tabular-nums; }
.row.sub { font-size: 11px; padding-top: 0; }
/* open/closed: status dot + word; the text stays in the text token */
.row .v.ok::before, .row .v.no::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 6px; background: var(--status-good); vertical-align: 1px; }
.row .v.no::before { background: var(--status-critical); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.btn { border: 1px solid var(--tw-line); background: rgba(253, 250, 247, 0.06); color: var(--tw-ink); border-radius: var(--radius); padding: 8px 10px; font: 500 12.5px var(--font-ui); cursor: pointer; text-align: start; }
.btn:hover { background: rgba(199, 150, 103, 0.16); } .btn.active { background: var(--btn-grad); color: #fff; border-color: transparent; }
.btn.ghost { background: transparent; } .btn.small { padding: 6px 8px; font-size: 12px; } .btn.block { display: block; width: 100%; margin: 4px 0; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dr-btn { margin-top: 10px; }
.toggle { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 13px; }
.toggle input { accent-color: var(--dr-sand); } .toggle .count { margin-inline-start: auto; color: var(--tw-ink-2); font-size: 11px; }
.item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: start; background: rgba(253, 250, 247, 0.04); border: 1px solid transparent; border-radius: 6px; padding: 8px; margin: 4px 0; color: var(--tw-ink); cursor: pointer; font: inherit; }
.item:hover { border-color: var(--tw-line); } .item .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.item .meta { color: var(--tw-ink-2); font-size: 12px; font-family: 'SaudiRiyal', var(--font-ui); } .item .price { color: var(--dr-blush); }
.tag.ok { background: var(--status-good); } .tag.warning { background: var(--status-warning); color: #0b0b0b; } .tag.critical { background: var(--status-critical); }
.tag { flex: none; width: 24px; height: 24px; border-radius: 4px; display: grid; place-items: center; font: 600 12px var(--font-ui); background: var(--dr-blue); color: #fff; }
.tag.valet { background: var(--dr-mauve); } .tag.dropoff { background: var(--dr-sand); }
.chip { display: inline-block; margin: 3px 4px 3px 0; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--tw-line); background: transparent; color: var(--tw-ink); font: 12px var(--font-ui); cursor: pointer; }
.chip:hover { background: rgba(199, 150, 103, 0.16); }
.form { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-bottom: 8px; font-size: 12.5px; color: var(--tw-ink-2); }
.calc { margin-top: 6px; } .list { margin-top: 6px; }
input.range { width: 100%; accent-color: var(--dr-sand); }
.log { margin: 6px 0; padding-inline-start: 18px; font-size: 12px; } .log li.note { list-style: none; margin-inline-start: -18px; } .link { background: none; border: 0; color: var(--dr-blush); cursor: pointer; padding: 2px 0; font: inherit; text-decoration: underline; }
label.btn { position: relative; overflow: hidden; } input.file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* timeline */
#timeline { position: fixed; z-index: 10; left: 10px; right: calc(var(--tw-w) + 20px); bottom: 10px; height: var(--tw-bottom); display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: var(--tw-panel); border: 1px solid var(--tw-line); border-radius: 8px; backdrop-filter: blur(10px); }
[dir="rtl"] #timeline { left: calc(var(--tw-w) + 20px); right: 10px; }
body.panel-hidden #timeline { left: 10px; right: 10px; }
.clockbox { display: flex; flex-direction: column; min-width: 92px; } #clock { font-size: 20px; color: var(--dr-sand-light); line-height: 1; }
#time { flex: 1; accent-color: var(--dr-sand); min-width: 80px; }

/* labels */
.lbl.lbl-off { visibility: hidden; }
.lbl { font: 500 12px/1.2 var(--font-ui); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); white-space: nowrap; transform: translateY(-50%); pointer-events: none; }
.lbl.zone { font: 700 18px/1 var(--font-display); color: var(--dr-cream); padding: 4px 10px; border-radius: 3px; background: rgba(98, 60, 44, 0.55); text-shadow: none; }
[dir="rtl"] .lbl.zone { font-family: var(--font-ui); font-weight: 500; }
.lbl.lm { font-size: 13px; padding: 3px 8px; border-inline-start: 3px solid var(--dr-sand); background: rgba(28, 18, 13, 0.6); text-shadow: none; }
.lbl.poi { font-size: 11px; padding: 2px 6px; border-radius: 10px; background: rgba(28, 18, 13, 0.62); text-shadow: none; }
.lbl.poi.dining::before { content: '● '; color: #e2a26a; } .lbl.poi.sightseeing::before { content: '● '; color: #e8d28a; } .lbl.poi.shopping::before { content: '● '; color: #c5a3d8; } .lbl.poi.hotel::before { content: '● '; color: #8fc1e8; } .lbl.poi.event::before { content: '● '; color: #f08a7e; }
.lbl.park { background: var(--dr-blue); padding: 3px 7px; border-radius: 3px; text-shadow: none; }
.lbl.ok { background: #2f855a; padding: 2px 6px; border-radius: 3px; text-shadow: none; } .lbl.sos { background: #c62a2a; padding: 2px 6px; border-radius: 3px; text-shadow: none; }
.lbl.warn { background: rgba(198, 42, 42, 0.8); padding: 3px 8px; border-radius: 3px; text-shadow: none; } .lbl.cap { background: rgba(85, 21, 46, 0.82); padding: 3px 8px; border-radius: 3px; text-shadow: none; }
.lbl.photo { background: var(--btn-grad); padding: 3px 8px; border-radius: 3px; text-shadow: none; } .lbl.vip { background: rgba(199, 150, 103, 0.9); color: #1c120d; padding: 3px 8px; border-radius: 3px; text-shadow: none; }
body.no-labels #labels { display: none; }
body:not([data-mode="explore"]):not([data-mode="visitor"]) .lbl.poi { opacity: 0.45; }

#pop { position: fixed; z-index: 12; max-width: 250px; background: var(--dr-cream); color: var(--dr-brown); border-radius: 6px; padding: 10px 12px; box-shadow: var(--shadow); font-size: 13px; }
#pop .meta { color: #7a5b4c; font-size: 12px; margin: 3px 0; } #pop a { color: var(--dr-blue); }

/* loading */
#loading { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3d2419, #1c120d 70%); transition: opacity 0.6s; }
#loading.done { opacity: 0; pointer-events: none; }
.load-inner { width: min(360px, 80vw); text-align: center; display: grid; gap: 14px; justify-items: center; }
.load-title { font: 700 30px var(--font-display); color: var(--dr-sand-light); }
.bar { width: 100%; height: 3px; background: rgba(199, 150, 103, 0.2); border-radius: 2px; overflow: hidden; } #loadbar { height: 100%; width: 0; background: var(--dr-sand); transition: width 0.3s; }

/* phones: bottom sheet over the lower 42 % with the view shifted up (camera view offset in main.js) */
@media (max-width: 759px) {
  :root { --tw-top: 52px; --tw-bottom: 50px; }
  #top { gap: 8px; padding: 0 10px; } .titles { display: none; } #logo-svg svg { width: 78px; }
  #modes { order: 3; } .mode { padding: 6px 9px; font-size: 12px; }
  #panel { top: auto; inset-inline: 0; bottom: 0; width: auto; height: 42vh; border-radius: 12px 12px 0 0; padding-bottom: calc(var(--tw-bottom) + 8px); }
  body.panel-hidden #panel, [dir="rtl"] body.panel-hidden #panel { transform: translateY(calc(42vh - 18px)); }
  #panel-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--tw-line); margin: 7px auto 0; }
  #timeline, [dir="rtl"] #timeline, body.panel-hidden #timeline { left: 0; right: 0; bottom: 0; border-radius: 0; height: var(--tw-bottom); gap: 6px; padding: 0 8px; }
  #date, #speed { display: none; } .clockbox { min-width: 64px; } #clock { font-size: 17px; }
}

/* ---------------------------------------------------------------- charts (dataviz method; colours validated with
   validate_palette.js against the panel surface #22150f: series-1 4.88:1, status good 5.30, warning 9.68, critical 3.70) */
:root { --series-1: #3987e5; --series-1-wash: rgba(57, 135, 229, 0.10); --series-1-track: #0d366b; --status-good: #0ca30c; --status-warning: #fab219; --status-critical: #d03b3b;
  --viz-grid: #3a2a21; --viz-base: #5a4536; --ink-1: var(--tw-ink); --ink-2: var(--tw-ink-2); --ink-3: #a8927f; }
.viz { margin: 10px 0 4px; }
.viz-title { font-size: 12px; color: var(--ink-2); margin: 8px 0 4px; }
.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; } .viz-base { stroke: var(--viz-base); stroke-width: 1; }
.viz-tick { fill: var(--ink-3); font: 10px var(--font-ui); font-variant-numeric: tabular-nums; }
.viz-area { fill: var(--series-1-wash); } .viz-line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-now { stroke: var(--ink-2); stroke-width: 1; } .viz-crossline { stroke: var(--ink-1); stroke-width: 1; }
.viz-dot { fill: var(--series-1); stroke: #22150f; stroke-width: 2; }
.viz-hit { fill: transparent; cursor: crosshair; outline: none; } .viz-hit:focus-visible { stroke: var(--dr-sand); stroke-width: 1; }
.viz-tip { position: fixed; z-index: 30; pointer-events: none; background: var(--dr-cream); color: #1c120d; border-radius: 6px; padding: 6px 10px; box-shadow: var(--shadow); display: grid; gap: 1px; font-size: 12px; }
.viz-tip b { font-size: 15px; font-weight: 600; } .viz-tip span { color: #6b5446; }
.viz-table summary { cursor: pointer; font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.viz-table table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; } .viz-table th, .viz-table td { text-align: start; padding: 2px 4px; border-bottom: 1px solid var(--viz-grid); font-variant-numeric: tabular-nums; }
.viz-meter { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; margin-top: 4px; width: 100%; }
.viz-meter .track { height: 6px; border-radius: 3px; background: var(--series-1-track); overflow: hidden; }
.viz-meter .fill { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--series-1); }
[dir="rtl"] .viz-meter .fill { border-radius: 3px 0 0 3px; margin-inline-start: auto; }
.viz-meter.warning .fill { background: var(--status-warning); } .viz-meter.critical .fill { background: var(--status-critical); }
.viz-meter .mval { font-size: 11.5px; font-weight: 600; color: var(--ink-1); text-align: end; white-space: nowrap; } .meta.mst { color: var(--ink-1); }
.viz-ibar { display: flex; align-items: center; gap: 6px; margin: 3px 0 1px; }
.viz-ibar .bar { height: 6px; border-radius: 0 3px 3px 0; background: var(--series-1); flex: none; } [dir="rtl"] .viz-ibar .bar { border-radius: 3px 0 0 3px; }
.viz-ibar .val { font-size: 11.5px; color: var(--ink-1); white-space: nowrap; }
.viz-legend { margin: 8px 0 4px; } .viz-legend .lrow { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.viz-legend .sw { width: 14px; height: 10px; border-radius: 2px; flex: none; } .viz-legend .lab { color: var(--ink-1); } .viz-legend .cnt { margin-inline-start: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lbl.cap.ok { background: var(--status-good); } .lbl.cap.warn { background: var(--status-warning); color: #0b0b0b; } .lbl.cap.no { background: var(--status-critical); }