/* Lunar Site Explorer: one stylesheet for the app (map-style layout) and the accuracy page.
   Layout uses logical properties (inline/block, start/end) so Kurdish and Arabic mirror correctly.
   Colour rules: neutral greys for the interface; the ARSMAN orange only for the main action, the clock
   and the selected section; amber = Sun and blue = Earth everywhere (also in the canvas charts). */
:root {
  --bg: #0b0c0e;
  --surface: #111316;
  --surface-2: #171a1e;
  --surface-3: #1f2328;
  --float: rgba(17, 19, 22, 0.95);
  --line: #22262b;
  --line-strong: #30353c;
  --text: #ecebe8;
  --muted: #9aa0a8;
  --accent: #ff7a1f;
  --accent-hover: #ff9447;
  --on-accent: #1a0c02;
  --sun: #f5a524;
  --earth: #5b9cf5;
  --good: #3ecf8e;
  --warn: #f2c14e;
  --bad: #f47067;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* icons drawn in CSS: same 24 px grid, rounded strokes, as the inline SVG icons */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --mask-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --mask-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.6v12.8a1 1 0 0 0 1.5.86l10.2-6.4a1 1 0 0 0 0-1.72L9.5 4.74A1 1 0 0 0 8 5.6z'/%3E%3C/svg%3E");
  --mask-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='5' width='4' height='14' rx='1.2'/%3E%3Crect x='13.5' y='5' width='4' height='14' rx='1.2'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
input, select, button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[dir="rtl"] body { font-family: "Noto Sans Arabic", "Noto Kufi Arabic", "Vazirmatn", Tahoma, var(--font); }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.icon { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- controls ---------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
button:hover:not(:disabled), .btn:hover { background: var(--surface-3); border-color: #3c424a; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover:not(:disabled), .btn.ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }
button.block { inline-size: 100%; min-block-size: 38px; }
button.small { min-block-size: 28px; padding-inline: 10px; font-size: 12.5px; }
.icon-button { inline-size: 36px; block-size: 36px; min-block-size: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-button:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }

.field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.field > span { color: var(--muted); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.field.range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.field.range > span { grid-column: 1 / -1; }
.field.range output { min-inline-size: 3.5ch; text-align: end; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.date-pair { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.controls .field.full, .controls .field.range { grid-column: 1 / -1; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }

input[type="number"], input[type="datetime-local"], select {
  block-size: 36px; inline-size: 100%; min-inline-size: 0; padding: 0 10px;
  background-color: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 8px;
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
input[type="number"]:hover, input[type="datetime-local"]:hover, select:hover { border-color: #3c424a; }

/* Drop-downs: our chevron instead of the browser's arrow. --chevron-x is its distance from the edge. */
select {
  --chevron-x: 10px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-inline-end: calc(var(--chevron-x) + 24px);
  background-image: var(--chevron); background-repeat: no-repeat; background-size: 16px 16px;
  background-position: right var(--chevron-x) center;
  white-space: nowrap; text-overflow: ellipsis;
}
html[dir="rtl"] select { background-position: left var(--chevron-x) center; }

/* Browsers that allow it (Chrome, Edge): the open list is designed too, not the system menu. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; gap: 8px; padding-inline-end: var(--chevron-x); background-image: none; }
  select::picker-icon {
    content: ""; flex: none; inline-size: 16px; block-size: 16px; margin-inline-start: auto;
    background-color: var(--muted);
    -webkit-mask: var(--mask-chevron) center / 16px 16px no-repeat; mask: var(--mask-chevron) center / 16px 16px no-repeat;
    transition: rotate 0.15s ease, background-color 0.12s;
  }
  select:hover::picker-icon, select:open::picker-icon { background-color: var(--text); }
  select:open::picker-icon { rotate: 180deg; }
  select:open { border-color: rgba(255, 122, 31, 0.6); }
  ::picker(select) {
    position-try-order: normal;   /* open downwards whenever the list fits there, like a normal menu */
    font: inherit;
    min-inline-size: anchor-size(self-inline); max-inline-size: min(440px, calc(100vw - 16px)); max-block-size: min(380px, 70dvh);
    margin-block: 6px; padding: 4px; overflow-y: auto;
    background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg);
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  option {
    display: flex; align-items: center; gap: 10px; min-block-size: 36px; padding: 6px 10px; border-radius: 8px;
    color: var(--text); font-size: 13.5px; font-weight: 400; cursor: pointer;
  }
  option:hover, option:focus-visible { background: var(--surface-3); outline: none; }
  option:checked { font-weight: 600; }
  option::checkmark {
    content: ""; order: 1; flex: none; inline-size: 16px; block-size: 16px; margin-inline-start: auto;
    background-color: var(--accent);
    -webkit-mask: var(--mask-check) center / 16px 16px no-repeat; mask: var(--mask-check) center / 16px 16px no-repeat;
  }
  optgroup { margin-block-start: 6px; padding-block-start: 6px; border-block-start: 1px solid var(--line); color: var(--muted); font-family: inherit; font-size: 11.5px; font-weight: 600; }
}

/* Number boxes without the browser's spin arrows (arrow keys still step the value) */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* The date box: our calendar icon in place of the browser's */
input[type="datetime-local"] { padding-inline-end: 6px; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  inline-size: 16px; block-size: 16px; margin: 0; padding: 5px; border-radius: 6px; cursor: pointer; opacity: 1;
  background: var(--calendar-icon) center / 16px 16px no-repeat; color: transparent;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { background-color: var(--surface-3); }
input[type="range"] { accent-color: var(--accent); margin: 0; min-inline-size: 0; }
input[type="checkbox"] { accent-color: var(--accent); inline-size: 15px; block-size: 15px; margin: 0; }
output { font-variant-numeric: tabular-nums; }

.hint { color: var(--muted); font-size: 12.5px; }
.status { min-block-size: 1.5em; color: var(--muted); font-size: 12.5px; }
.status:empty { min-block-size: 0; }
.status.problem { color: var(--warn); }
.source { color: var(--muted); font-size: 12px; }
.verdict { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.verdict:empty { display: none; }
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }
.empty { padding: 24px 16px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); text-align: center; font-size: 13px; }
.dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; }
.dot.sun { background: var(--sun); }
.dot.earth { background: var(--earth); }

/* ---------- numbers ---------- */
.readout { margin: 0; }
.readout .row { padding-block: 8px; border-block-start: 1px solid var(--line); }
.readout .row:first-child { padding-block-start: 0; border-block-start: 0; }
.readout dt { color: var(--muted); font-size: 12px; }
.readout dd { margin: 2px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.readout small { display: block; margin-block-start: 2px; color: var(--muted); font-size: 11.5px; font-weight: 400; line-height: 1.4; }
.badge { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.badge.good { color: var(--good); }
.badge.warn { color: var(--warn); }
.badge.bad { color: var(--bad); }

/* label and value on one line (the live data card) */
.readout.compact .row { display: grid; grid-template-columns: minmax(56px, auto) minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding-block: 6px; }
.readout.compact .row:first-child { padding-block-start: 0; }
.readout.compact dd { margin: 0; text-align: right; }
html[dir="rtl"] .readout.compact dd { text-align: left; }

/* stat tiles (period summary, battery, route) */
.readout.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.readout.tiles:empty { display: none; }
.readout.tiles .row, .readout.tiles .row:first-child { padding: 10px 12px; border: 0; box-shadow: 1px 1px 0 var(--line); }
.readout.tiles .row:last-child:nth-child(odd) { grid-column: 1 / -1; }
.readout.tiles dd { font-size: 18px; font-weight: 600; line-height: 1.3; }

/* result lists drawn as cards (best spots, comparison): the scripts give each cell a data-label */
table.cards { display: block; inline-size: 100%; border-collapse: separate; font-variant-numeric: tabular-nums; }
table.cards thead { display: none; }
table.cards tbody { display: flex; flex-direction: column; gap: 8px; }
table.cards tr { display: grid; gap: 6px 10px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
table.cards td { display: block; padding: 0; border: 0; min-inline-size: 0; font-size: 13px; }
table.cards td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
table.cards td.best { color: var(--good); font-weight: 600; }
table.cards td:only-child { grid-column: 1 / -1; color: var(--muted); }
table.cards button { min-block-size: 28px; padding-inline: 10px; white-space: nowrap; }

#best-table tr { grid-template-columns: 24px repeat(4, minmax(0, 1fr)); align-items: center; }
#best-table td:nth-child(1):not(:only-child) { grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--good); color: #062014; font-size: 12px; font-weight: 700; }
#best-table td:nth-child(1)::before, #best-table td:nth-child(2)::before { display: none; }
#best-table td:nth-child(2) { grid-column: 2 / 5; grid-row: 1; font-weight: 600; }
#best-table td:nth-child(7) { grid-column: 5; grid-row: 1; justify-self: end; }
#best-table td:nth-child(n+3):nth-child(-n+6) { align-self: end; }
#best-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
#best-table td:nth-child(4) { grid-column: 3; grid-row: 2; }
#best-table td:nth-child(5) { grid-column: 4; grid-row: 2; }
#best-table td:nth-child(6) { grid-column: 5; grid-row: 2; }

#compare-table tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#compare-table td:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
#compare-table td:nth-child(1) strong { font-weight: 600; }
#compare-table td:nth-child(1) .muted { color: var(--muted); font-size: 12px; }
#compare-table td:last-child { grid-column: 4; grid-row: 1; justify-self: end; align-self: start; }

/* ---------- small shared pieces ---------- */
.legend { inline-size: 250px; padding: 10px 12px; background: var(--float); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); font-size: 12px; }
.legend-title { color: var(--text); }
.legend-bar { block-size: 8px; border-radius: 2px; margin-block: 8px 4px; }
.legend-bar.heat { background: linear-gradient(90deg, #05030f, #3d0a5c, #b8293d, #fa800f, #fced80); }
.legend-bar.slope { background: linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725); }
.legend-bar.ice { background: linear-gradient(90deg, #26d9ff 0 14%, #121216 14%, #b8b8b3); }
.legend-scale { display: flex; justify-content: space-between; color: var(--muted); font-variant-numeric: tabular-nums; }

.menu { position: relative; }
.menu summary { list-style: none; user-select: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; z-index: 35; inset-block-end: calc(100% + 8px); inset-inline-start: 0; inline-size: 240px;
  display: flex; flex-direction: column; gap: 14px; padding: 14px;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.menu-panel > strong { font-size: 13px; }

.quiz-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.quiz-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.quiz-list li.solved { border-color: rgba(62, 207, 142, 0.45); }
.quiz-list strong { display: block; font-size: 13.5px; }
.quiz-list small { display: block; margin-block-start: 2px; color: var(--muted); font-size: 12.5px; }
.quiz-mark { flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border: 1px solid var(--line-strong); border-radius: 50%; color: transparent; font-size: 12px; }
.quiz-list li.solved .quiz-mark { background: var(--good); border-color: var(--good); color: #062014; font-weight: 700; }

.calendar { display: block; inline-size: 100%; block-size: 120px; border-radius: 6px; }
.chart-canvas { display: block; inline-size: 100%; block-size: 200px; border-radius: 6px; }
.chart { margin: 0; min-inline-size: 0; }
.chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-block-end: 8px; }
.chart figcaption strong { font-size: 13px; }
.chart figcaption span { color: var(--muted); font-size: 12px; }
.chart canvas { display: block; inline-size: 100%; block-size: 150px; border-radius: 6px; touch-action: none; }
#timeline { cursor: ew-resize; }
#record::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: #f04a4a; flex: none; }
#record.recording { background: #b4232a; border-color: #d7383f; color: #fff; }
#record.recording::before { background: #fff; animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- accuracy page header ---------- */
.appbar { position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; gap: 16px; block-size: 56px; padding-inline: 16px; background: var(--bg); border-block-end: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.logo { inline-size: 28px; block-size: 28px; flex: none; }
.title { display: flex; align-items: baseline; gap: 12px; min-inline-size: 0; }
.title h1 { font-size: 15px; white-space: nowrap; }
.title p { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .top-actions { display: flex; gap: 6px; margin-inline-start: auto; }

/* ======================================================================================
   The app: the 3D view fills the window and every control floats over it.
   Geometry (wide screens):
     rail (72) | side panel (400) | free 3D area .......................... | live data card (340)
   --left / --right are where the free 3D area starts and ends; floating controls sit inside it.
   ====================================================================================== */
html:has(body.app) { overflow: hidden; block-size: 100%; background: #000; }
body.app {
  position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; background: #000;
  --gap: 12px;
  --rail-w: 72px;
  --panel-w: 400px;
  --sky-w: 340px;
  --top-h: 42px;                       /* height of the floating controls along the top */
  --bar-h: 56px;                       /* height of the clock bar */
  --chart-h: 168px;                    /* height of the chart strip above it */
  --strip-w: calc(100vw - var(--left) - 2 * var(--gap));
  --horizon-w: calc((var(--strip-w) - 6px) * 0.38);
  --dock-h: calc(var(--bar-h) + 6px + var(--chart-h));
  --actions-w: 344px;                  /* room kept for the top-right buttons */
  --panel-end: calc(var(--rail-w) + var(--panel-w));
  --left: var(--panel-end);
  --right: calc(var(--sky-w) + 2 * var(--gap));
  --below-top: calc(2 * var(--gap) + var(--top-h));
  --above-bar: calc(2 * var(--gap) + var(--dock-h));
}

/* the 3D view fills the space between the panels and above the clock, so the Moon is centred where
   you can see it and the south pole is never under a control */
.app .scene { position: fixed; inset-block: 0 calc(var(--above-bar) - var(--gap)); inset-inline-start: var(--left); inset-inline-end: var(--right); z-index: 0; background: #000; }
.app .scene canvas { display: block; }

/* while anything loads: a thin bar along the top edge */
body.app.is-loading::after {
  content: ""; position: fixed; z-index: 50; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 40% 100% no-repeat;
  animation: loading 1.1s ease-in-out infinite;
}
@keyframes loading { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* floating surfaces */
.app .views .segmented, .app .top-actions > *, .app .layers .tool, .app .layers summary, .app .look, .app .sky-open, .app .transport {
  background-color: var(--float); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
}

/* site search */
.app .searchbox {
  position: fixed; z-index: 25; inset-block-start: var(--gap); inset-inline-start: calc(var(--rail-w) + var(--gap));
  inline-size: calc(var(--panel-w) - 2 * var(--gap)); block-size: 48px;
  display: flex; align-items: center; gap: 6px; padding-inline: 14px 6px;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 24px; box-shadow: var(--shadow);
}
.app .searchbox:focus-within { border-color: rgba(255, 122, 31, 0.6); }
.searchbox-logo { display: none; inline-size: 26px; block-size: 26px; flex: none; }
.site-search { flex: 1; display: flex; align-items: center; gap: 8px; min-inline-size: 0; color: var(--accent); }
.site-search select { --chevron-x: 4px; flex: 1; block-size: 44px; padding-inline-start: 2px; border: 0; background-color: transparent; color: var(--text); font-size: 14.5px; font-weight: 500; }
.site-search select:focus-visible { outline: none; }
.more-button { display: none; }

/* camera views, top centre */
.app .views {
  position: fixed; z-index: 10; inset-block-start: var(--gap);
  inset-inline-start: calc(var(--panel-end) + var(--gap)); inset-inline-end: calc(max(var(--right), var(--actions-w)) + var(--gap));
  display: flex; justify-content: center; pointer-events: none;
}
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; pointer-events: auto; }
.segmented button { min-block-size: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); white-space: nowrap; }
.segmented button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.segmented button.active, .segmented button.active:hover { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* share, record, language: top right */
.app .top-actions { position: fixed; z-index: 25; inset-block-start: var(--gap); inset-inline-end: var(--gap); display: flex; gap: 6px; }
.app .top-actions > * { min-block-size: var(--top-h); border-radius: 12px; white-space: nowrap; }
.app .top-actions select.lang { --chevron-x: 12px; inline-size: auto; block-size: var(--top-h); padding-inline-start: 14px; }

/* navigation rail */
.app .rail {
  position: fixed; z-index: 20; inset-block: 0; inset-inline-start: 0; inline-size: var(--rail-w);
  display: flex; flex-direction: column; align-items: center; padding-block: 14px 10px;
  background: var(--bg); border-inline-end: 1px solid var(--line);
}
.rail-logo { inline-size: 30px; block-size: 30px; margin-block-end: 16px; }
.rail-tabs, .rail-extra { display: flex; flex-direction: column; gap: 2px; inline-size: 100%; }
.rail-extra { margin-block-start: auto; }
.rail-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; inline-size: 100%; min-block-size: 58px; padding: 6px 2px;
  border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 500; text-align: center;
}
.rail-item:hover:not(:disabled) { background: transparent; color: var(--text); }
.rail-item .icon { inline-size: 22px; block-size: 22px; padding: 4px 16px; box-sizing: content-box; border-radius: 16px; transition: background-color 0.15s; }
.rail-item:hover .icon { background: var(--surface-3); }
.rail-item.active { color: var(--text); }
.rail-item.active .icon { background: rgba(255, 122, 31, 0.18); color: var(--accent); }
.rail-sky { display: none; }
.sheet-handle { display: none; }

/* side panel */
.app .sheet-scroll {
  position: fixed; z-index: 20; inset-block: 0; inset-inline-start: var(--rail-w); inline-size: var(--panel-w);
  overflow-y: auto; overscroll-behavior: contain; padding-block: calc(var(--gap) + 48px + 16px) 24px;
  background: var(--surface); border-inline-end: 1px solid var(--line);
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable;
}
.app .sheet-scroll:hover, .app .sheet-scroll:focus-within { scrollbar-color: var(--line-strong) transparent; }
.panel-section { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 8px; container-type: inline-size; }
/* narrow panels: the date gets the full width (only sections are containers: containment on the whole
   panel would trap the live data card, which is positioned against the window from inside it) */
@container (max-width: 340px) {
  .date-pair { grid-template-columns: 1fr; }
}
.panel-section h2 { font-size: 18px; letter-spacing: -0.01em; }
.panel-section h3 { margin-block-start: 8px; font-size: 13.5px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 8px; }
.section-head h3 { margin: 0; }
.picker { display: block; inline-size: min(100%, 300px); margin-inline: auto; aspect-ratio: 1; cursor: crosshair; }
.brand-line { margin-block-start: 6px; padding-block-start: 14px; border-block-start: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.brand-line strong { color: var(--text); font-weight: 600; }
.credits { color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.static-notice { margin: 0 20px 14px; padding: 10px 12px; background: rgba(242, 193, 78, 0.07); border: 1px solid rgba(242, 193, 78, 0.3); border-radius: 10px; color: var(--warn); font-size: 12.5px; }
#route-draw.active { background: transparent; color: var(--accent); }

.app .panel-toggle {
  position: fixed; z-index: 21; inset-block-start: 50%; inset-inline-start: var(--left); translate: 0 -50%;
  inline-size: 24px; block-size: 48px; min-block-size: 0; padding: 0; gap: 0;
  background: var(--surface); border: 1px solid var(--line-strong); border-inline-start: 0;
  border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 10px; border-end-end-radius: 10px;
  color: var(--muted); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.app .panel-toggle:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); color: var(--text); }
.panel-toggle .icon { inline-size: 16px; block-size: 16px; stroke-width: 2.2; }
body.app.left-closed .panel-toggle .chev, html[dir="rtl"] .panel-toggle .chev { transform: scaleX(-1); }
html[dir="rtl"] body.app.left-closed .panel-toggle .chev { transform: none; }

/* live data card, right */
.app .sky {
  position: fixed; z-index: 20; inset-block-start: var(--below-top); inset-inline-end: var(--gap); inline-size: var(--sky-w);
  max-block-size: calc(100dvh - var(--below-top) - var(--above-bar));
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(17, 19, 22, 0.97); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg);
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.app .sky:hover { scrollbar-color: var(--line-strong) transparent; }
.sky-head { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 10px 6px; padding-inline: 16px 8px; background: rgb(17, 19, 22); }
.sky-head h2 { font-size: 14px; }
.sky-head .icon-button { inline-size: 32px; block-size: 32px; min-block-size: 32px; }
.sky #now { padding: 2px 16px 12px; }
.sky .chart { padding: 10px 16px 12px; border-block-start: 1px solid var(--line); }
.sky .chart figcaption { margin-block-end: 6px; line-height: 1.35; }
.sky .chart canvas { block-size: 130px; }
.app .sky-open { position: fixed; z-index: 10; inset-block-start: var(--below-top); inset-inline-end: var(--gap); display: none; min-block-size: 40px; padding-inline: 12px 16px; border-radius: 20px; }
.sky-open .icon { color: var(--sun); }

/* map layers bottom-left, camera buttons bottom-right, clock along the bottom */
.app .layers { position: fixed; z-index: 10; inset-block-end: var(--above-bar); inset-inline-start: calc(var(--left) + var(--gap)); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.layers-row { display: flex; gap: 6px; }
.app .layers .tool { display: inline-flex; align-items: center; gap: 4px; min-block-size: 40px; padding-inline: 10px 2px; border-radius: 12px; color: var(--muted); }
.layers .tool .icon { color: var(--text); }
.tool-label { margin-inline-start: 4px; font-size: 12px; white-space: nowrap; }
.layers .tool select { --chevron-x: 6px; inline-size: 190px; block-size: 36px; padding-inline-start: 6px; border: 0; background-color: transparent; color: var(--text); font-size: 13px; }
.layers .tool select:focus-visible { outline: none; }
.app .layers .tool:focus-within { border-color: rgba(255, 122, 31, 0.6); }
.app .layers summary { display: inline-flex; inline-size: 40px; block-size: 40px; min-block-size: 40px; border-radius: 12px; color: var(--text); }
.app .layers .menu[open] summary { background: var(--surface-3); }

.app .camera-buttons { position: fixed; z-index: 10; inset-block-end: var(--above-bar); inset-inline-end: calc(var(--right) + var(--gap)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.app .look { min-block-size: 36px; padding-inline: 12px; border-radius: 12px; font-size: 12.5px; }

.app .transport {
  position: fixed; z-index: 10; inset-block-end: var(--gap); inset-inline-start: calc(var(--left) + var(--gap)); inset-inline-end: var(--gap);
  block-size: var(--bar-h); display: flex; align-items: center; gap: 14px; padding-inline: 10px; border-radius: 14px;
}
#play { inline-size: 40px; block-size: 40px; min-block-size: 40px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; flex: none; }
#play::before {
  content: ""; inline-size: 22px; block-size: 22px; background-color: currentColor;
  -webkit-mask: var(--mask-play) center / 22px 22px no-repeat; mask: var(--mask-play) center / 22px 22px no-repeat;
}
#play.playing::before { -webkit-mask-image: var(--mask-pause); mask-image: var(--mask-pause); }
.time-out { flex: none; min-inline-size: 20ch; font-family: var(--mono); font-size: 13px; }
.transport input[type="range"] { flex: 1; }
.transport .speed select { inline-size: auto; block-size: 36px; background-color: var(--surface-2); }

/* tour, scene hint and toast: centred over the free 3D area */
.app .tour, .app .scene-note, .app .toast {
  position: fixed; inset-block-start: var(--below-top);
  inset-inline-start: calc(var(--panel-end) + var(--gap)); inset-inline-end: calc(var(--right) + var(--gap)); margin-inline: auto;
}
.app .tour {
  z-index: 30; inline-size: min(420px, calc(100vw - var(--panel-end) - var(--right) - 2 * var(--gap)));
  padding: 14px 16px 16px; background: rgba(17, 19, 22, 0.98); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg);
}
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; }
.tour-head .icon-button { inline-size: 30px; block-size: 30px; min-block-size: 30px; }
.tour p { margin-block: 6px 14px; color: #d6d4cf; line-height: 1.6; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-count { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.tour-buttons { display: flex; gap: 6px; }
.tour-buttons button:empty { display: none; }
.app .scene-note { z-index: 5; text-align: center; color: rgba(236, 235, 232, 0.72); font-size: 12px; text-shadow: 0 1px 3px #000; pointer-events: none; }
.tour:not([hidden]) + .scene-note { display: none; }
.app .toast {
  z-index: 40; inline-size: max-content; max-inline-size: min(480px, calc(100vw - var(--panel-end) - var(--right) - 2 * var(--gap)));
  padding: 10px 14px; background: #ecebe8; color: #15171a; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13px;
  opacity: 0; translate: 0 -6px; transition: opacity 0.2s, translate 0.2s; pointer-events: none;
}
.app .toast.show { opacity: 1; translate: 0 0; }
.app .toast.problem { background: var(--warn); color: #241a02; }
.tour:not([hidden]) ~ .toast { inset-block-start: auto; inset-block-end: var(--above-bar); }

/* ---------- wide screens only ---------- */
@media (min-width: 900px) {
  .app .sky[hidden] { display: flex !important; }       /* always shown here, not a tab */
  body.app.left-closed { --left: var(--rail-w); }
  body.app.sky-closed { --right: 0px; }
  body.app.charts-closed { --chart-h: 0px; --dock-h: var(--bar-h); }
  body.app.left-closed .sheet-scroll { visibility: hidden; }
  body.app.left-closed .sky { visibility: visible; }   /* the card lives inside the panel's markup */
  body.app.sky-closed .sky { visibility: hidden; pointer-events: none; }
  body.app.sky-closed .sky-open { display: inline-flex; }

  /* The charts belong to the live data markup (that is where phones show them), but on wide screens
     they sit in a strip on top of the clock bar: the timeline always, the horizon from 1100 px. */
  .app .sky .timeline-chart {
    position: fixed; z-index: 10; inset-block-end: calc(var(--gap) + var(--bar-h) + 6px);
    inset-inline-start: calc(var(--left) + var(--gap)); inset-inline-end: var(--gap); block-size: var(--chart-h);
    padding: 8px 12px 10px; visibility: visible; pointer-events: auto;
    background: var(--float); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow);
  }
  .app .sky .timeline-chart figcaption { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-block-end: 6px; }
  .app .sky .timeline-chart figcaption span { margin-inline-start: 8px; }
  .app .sky .timeline-chart canvas { block-size: calc(var(--chart-h) - 46px); }
  body.app.charts-closed .sky .timeline-chart { display: none; }
  body.app.charts-closed .charts-toggle { color: var(--muted); }
  .charts-toggle { color: var(--accent); }
}
@media (min-width: 1100px) {
  .app .sky .horizon-chart {
    position: fixed; z-index: 10; inset-block-end: calc(var(--gap) + var(--bar-h) + 6px);
    inset-inline-start: calc(var(--left) + var(--gap)); inline-size: var(--horizon-w); block-size: var(--chart-h);
    padding: 8px 12px 10px; visibility: visible; pointer-events: auto;
    background: var(--float); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow);
  }
  .app .sky .horizon-chart figcaption { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-block-end: 6px; }
  .app .sky .horizon-chart figcaption span { margin-inline-start: 8px; }
  .app .sky .horizon-chart canvas { block-size: calc(var(--chart-h) - 46px); }
  .app .sky .timeline-chart { inset-inline-start: calc(var(--left) + var(--gap) + var(--horizon-w) + 6px); }
  body.app.charts-closed .sky .horizon-chart { display: none; }
}

/* ---------- tall screens: a taller timeline, so its curves have room ---------- */
@media (min-width: 900px) and (min-height: 860px) {
  body.app { --chart-h: 192px; }
}
@media (min-width: 900px) and (min-height: 1000px) {
  body.app { --chart-h: 220px; }
}

/* ---------- smaller laptops ---------- */
@media (max-width: 1359px) {
  body.app { --panel-w: 360px; --sky-w: 320px; }
}

/* ---------- tablets: share / record / language move into the "More" menu ---------- */
@media (max-width: 1099px) {
  body.app { --panel-w: 340px; --actions-w: 0px; }
  .more-button { display: inline-flex; }
  .app .top-actions {
    display: none; inset-block-start: calc(var(--gap) + 48px + 6px); inset-inline-start: calc(var(--rail-w) + var(--gap)); inset-inline-end: auto;
    inline-size: 240px; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px;
    background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg);
  }
  body.app.actions-open .top-actions { display: flex; }
  .app .top-actions > * { box-shadow: none; border-color: transparent; background-color: transparent; justify-content: flex-start; min-block-size: 40px; }
  .app .top-actions > button:hover:not(:disabled) { background: var(--surface-3); }
  .app .top-actions select.lang { inline-size: 100%; background-color: var(--surface); border-color: var(--line-strong); }
  .segmented button { padding-inline: 10px; }
}

/* ---------- phones: everything in a bottom sheet ---------- */
@media (max-width: 899px) {
  body.app {
    --gap: 8px; --top-h: 40px; --bar-h: 92px;
    --sheet-h: 76px;
    --left: 0px; --right: 0px; --panel-end: 0px;
  }
  body.app.sheet-open { --sheet-h: 62dvh; }

  .app .searchbox { inset-inline: var(--gap); inline-size: auto; padding-inline: 8px 4px; }
  .searchbox-logo { display: block; }
  .site-search .icon { display: none; }
  .app .top-actions { inset-inline-start: auto; inset-inline-end: var(--gap); }

  .app .views { inset-block-start: calc(var(--gap) + 48px + 8px); inset-inline: var(--gap); }
  .app .views .segmented { inline-size: 100%; }
  .segmented button { flex: 1 1 auto; min-block-size: 32px; padding-inline: 6px; font-size: 12.5px; }

  .app .dock {
    position: fixed; z-index: 20; inset-inline: 0; inset-block-end: 0; block-size: var(--sheet-h);
    display: flex; flex-direction: column; padding-block-end: env(safe-area-inset-bottom);
    background: var(--surface); border-block-start: 1px solid var(--line-strong);
    border-start-start-radius: 18px; border-start-end-radius: 18px; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
    transition: block-size 0.22s ease;
  }
  .sheet-handle { display: flex; align-items: center; justify-content: center; flex: none; inline-size: 100%; block-size: 20px; min-block-size: 20px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .sheet-handle:hover:not(:disabled) { background: transparent; }
  .sheet-handle span { inline-size: 36px; block-size: 4px; border-radius: 2px; background: var(--line-strong); }
  .app .rail {
    position: static; flex: none; flex-direction: row; align-items: stretch; inline-size: auto; block-size: 54px;
    padding: 0 4px; background: transparent; border: 0; border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
  }
  .rail-logo { display: none; }
  .rail-tabs, .rail-extra { flex-direction: row; inline-size: auto; margin: 0; gap: 0; }
  .rail-item { inline-size: auto; min-inline-size: 64px; min-block-size: 0; padding: 2px 4px; font-size: 10.5px; }
  .rail-item .icon { inline-size: 20px; block-size: 20px; padding: 3px 14px; }
  .rail-sky { display: flex; }
  .app .sheet-scroll { position: static; flex: 1; min-block-size: 0; inline-size: auto; padding: 14px 0 24px; background: transparent; border: 0; }
  body.app:not(.sheet-open) .sheet-scroll { visibility: hidden; }
  .panel-section { padding-inline: 16px; }
  .app .sky { position: static; inline-size: auto; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .sky-head { position: static; padding: 0 16px 6px; background: transparent; }
  .sky-close, .app .panel-toggle, .app .sky-open, .charts-toggle { display: none !important; }
  .sky .chart canvas { block-size: 170px; }

  .app .transport {
    inset-inline: var(--gap); inset-block-end: calc(var(--sheet-h) + var(--gap)); block-size: auto;
    flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; transition: inset-block-end 0.22s ease;
  }
  .transport input[type="range"] { order: 3; flex-basis: 100%; }
  .time-out { flex: 1; min-inline-size: 0; font-size: 12.5px; }
  .app .layers, .app .camera-buttons { inset-block-end: calc(var(--sheet-h) + var(--bar-h) + 2 * var(--gap)); }
  .app .layers { inset-inline-start: var(--gap); }
  .app .camera-buttons { inset-inline-end: var(--gap); inset-block-end: calc(var(--sheet-h) + var(--bar-h) + 3 * var(--gap) + 40px); }
  .layers .tool select { inline-size: 150px; }
  .tool-label { display: none; }
  .legend { inline-size: 172px; font-size: 11px; }
  body.app.sheet-open .layers, body.app.sheet-open .camera-buttons { display: none; }

  .app .tour { inset-block-start: calc(var(--gap) + 48px + 8px + 40px + 8px); inset-inline: var(--gap); inline-size: auto; margin: 0; }
  .app .scene-note { display: none; }
  .app .toast { inset-block-start: auto; inset-block-end: calc(var(--sheet-h) + var(--bar-h) + 2 * var(--gap)); inset-inline: var(--gap); max-inline-size: calc(100vw - 2 * var(--gap)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}