:root {
  color-scheme: dark;
  scrollbar-color: #496574 #101e27;
  scrollbar-width: thin;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  color: #e6eef0;
  background: #101e27;
  --calcite-color-brand: #90decf;
  --calcite-color-brand-hover: #b1eee2;
  --calcite-color-brand-press: #61bcae;
  --calcite-color-text-inverse: #101e27;
  --calcite-color-background: #101e27;
  --calcite-color-foreground-1: #142630;
  --calcite-color-foreground-2: #1a303c;
  --calcite-color-foreground-3: #203947;
  --calcite-color-border-1: #304550;
  --calcite-color-border-2: #263d49;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body, calcite-shell, calcite-shell-panel, calcite-panel, calcite-block, calcite-dialog, arcgis-elevation-profile {
  color-scheme: dark;
  scrollbar-color: #496574 #101e27;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #101e27; }
*::-webkit-scrollbar-thumb { background: #496574; border: 2px solid #101e27; border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: #6b8b98; }
[hidden] { display: none !important; }
.skip { position: absolute; top: -100px; z-index: 100; padding: 12px; background: var(--calcite-color-foreground-1); }
.skip:focus-within { top: 4px; }
calcite-navigation { --calcite-navigation-background-color: #101e27; }
calcite-navigation-logo { --calcite-navigation-logo-heading-color: #edf6f5; }
#ranking-shell {
  --calcite-shell-panel-width: 340px;
  --calcite-shell-panel-min-width: 285px;
  --calcite-shell-panel-max-width: 450px;
}
calcite-panel { min-height: 0; }
calcite-block { margin: 0; }
#ranking-notice { margin-bottom: 10px; }
.rank-number { width: 40px; min-width: 40px; color: #a8c0cb; font: 12px monospace; text-align: center; }
.rank-grade { color: #f2bd8b; font-size: 18px; min-width: 60px; text-align: right; padding-inline-end: 4px; }
calcite-list-item { --calcite-list-item-spacing-block: 13px; --calcite-list-item-spacing-inline: 8px; }
.scene-workspace { display: grid; grid-template-rows: minmax(260px, 1fr) 460px; width: 100%; height: 100%; min-height: 0; min-width: 0; overflow: hidden; }
.stage { position: relative; min-height: 0; background: #192d39; }
arcgis-scene { display: block; width: 100%; height: 100%; }
.caption { position: absolute; top: 14px; left: 16px; max-width: 350px; pointer-events: none; --calcite-block-background-color: #101e27d9; }
.caption calcite-label { margin: 0; font-size: 11px; color: #b2c7d0; }
.scene-notice { position: absolute; top: 35%; left: 50%; transform: translateX(-50%); max-width: 85%; width: 340px; }
.tools { position: absolute; left: 16px; bottom: 28px; width: 245px; }
.tools calcite-label { margin: 10px 0 0; }
.legend { position: absolute; right: 16px; bottom: 28px; width: 255px; }
.legend calcite-chip-group { display: flex; flex-wrap: wrap; gap: 5px; }
calcite-swatch { width: 12px; height: 12px; }
.metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#grade, #length { --calcite-chip-text-color: #f0be90; }
.endpoint-guide { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-block: 10px; }
#endpoint-a { --calcite-chip-text-color: #90decf; }
#endpoint-b { --calcite-chip-text-color: #f0be90; }
.footnote { font-size: 11px; color: #a5bac4; }
arcgis-elevation-profile { display: block; width: 100%; height: 210px; --calcite-color-foreground-1: #142630; }
calcite-dialog { --calcite-dialog-content-space: 24px; }
calcite-dialog p { line-height: 1.6; margin: 0 0 18px; }
code { color: #abdccc; }
@media (max-width: 1100px) {
  .caption { max-width: 270px; }
  .tools { width: 215px; }
  .legend { width: 215px; }
}
@media (max-width: 700px) {
  .collection-link { display: none; }
  calcite-navigation-logo { max-width: 235px; }
  #ranking-shell { --calcite-shell-panel-width: min(340px, calc(100vw - 42px)); }
  .scene-workspace { grid-template-rows: minmax(285px, 1fr) 380px; }
  .caption { max-width: 225px; top: 8px; left: 8px; }
  .caption calcite-label { font-size: 10px; }
  .tools { left: 8px; bottom: 24px; width: 175px; }
  .legend { right: 8px; bottom: 24px; width: 165px; }
  .legend calcite-chip { font-size: 10px; }
  .endpoint-guide { justify-content: flex-start; }
}




/* Contain map/component stacking so the ranking overlay covers every scene control. */
.scene-workspace { position: relative; isolation: isolate; z-index: 0; }
#ranking-shell { z-index: 10; }