/* Simple workspace: model first, task controls on demand. Loaded last intentionally. */
body
  :is(
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(
        [type="color"]
      ):not([type="button"]):not([type="submit"]),
    select,
    textarea
  ),
body[data-style]
  :is(
    #asset-search,
    #tree-mode,
    #workspace-domain,
    #history-day,
    #replay-speed,
    #scene-geometry
  ) {
  background: #152d3b !important;
  color: #f0f6fa !important;
  border: 1px solid #607e8e !important;
  color-scheme: dark !important;
  box-shadow: none;
}
body input::placeholder,
body textarea::placeholder {
  color: #afc3ce !important;
  opacity: 1 !important;
}
body input:-webkit-autofill {
  -webkit-text-fill-color: #f0f6fa !important;
  box-shadow: 0 0 0 1000px #152d3b inset !important;
}
body :is(input, select, textarea):focus-visible {
  outline: 2px solid #7ad8cb !important;
  outline-offset: 2px;
}
body
  :is(
    .section-rail,
    #experience-dock,
    #experience-summary,
    .assistant-fab,
    .exploration,
    .compass
  ) {
  display: none !important;
}
.layout-buttons
  > :is(
    #layout-monitor,
    #layout-bim,
    #layout-map,
    #layout-focus,
    #workspace-options,
    #camera-directory-tool
  ) {
  display: none;
}
body .viewport-tools > :not(#home-view) {
  display: none;
}
body .viewport-tools #home-view {
  width: auto;
  min-width: 80px;
  font-size: calc(12px * var(--text-scale, 1));
  padding: 9px 15px;
  border-radius: 8px;
}
body .viewport-tools {
  bottom: calc(var(--timeline-height) + 40px);
  border-radius: 10px;
}
body .scene-geometry {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: calc(11px * var(--text-scale, 1));
  min-width: 0;
}
body .scene-geometry select {
  max-width: 255px;
  width: 22vw;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: calc(11px * var(--text-scale, 1));
}
body .layout-buttons {
  margin-left: 12px;
}
body .layout-buttons button {
  border-radius: 7px;
  font-size: calc(12px * var(--text-scale, 1));
  padding: 7px 13px;
}
body .section-rail + * {
  margin-top: 0;
}
body .selection-actions {
  position: fixed;
  inset: auto;
  width: 240px;
  padding: 10px;
  border-radius: 10px;
  background: #142d3cf5;
  color: #edf7fb;
  border: 1px solid #6e93a5;
  box-shadow: 0 12px 32px #0005;
  z-index: 80;
  animation: none;
  transform: none;
}
body .selection-heading {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: calc(12px * var(--text-scale, 1));
  margin-bottom: 8px;
}
body .selection-heading span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
body .selection-heading i {
  display: none;
}
body .selection-heading button {
  border: 0;
  background: transparent;
  color: #c6d7df;
  font-size: calc(19px * var(--text-scale, 1));
  padding: 0 3px;
}
body .radial-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body .radial-actions button {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  padding: 9px 10px;
  text-align: left;
  background: #284454;
  color: #f2f8fc;
  border: 0;
  box-shadow: none;
  font-size: calc(12px * var(--text-scale, 1));
}
body .radial-actions button:hover {
  background: #3d6775;
}
body #selection-context {
  display: none;
}
body.has-object-details .inspector {
  visibility: hidden;
  pointer-events: none;
}
body .selection-drawer {
  top: 150px;
  bottom: calc(var(--timeline-height) + 34px);
  right: 16px;
  width: var(--inspector-width, 300px);
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  background: #132c3cf5;
  color: #eaf4f9;
  border: 1px solid #698b9c;
}
body .selection-drawer header {
  padding: 14px;
}
body #selection-content {
  padding: 14px;
}
body .inspection-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
body .inspection-actions button {
  padding: 8px 12px;
}
body .model-credit {
  font-size: calc(10px * var(--text-scale, 1));
  line-height: 1.7;
  color: #adc2cd;
  border-top: 1px solid #6c92a53a;
  padding-top: 12px;
}
body .tools-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}
body .tools-list button {
  display: flex;
  justify-content: space-between;
  text-align: left;
  padding: 15px;
  font-size: calc(13px * var(--text-scale, 1));
  border-radius: 8px;
}
body .site-gallery {
  position: fixed;
  inset: 110px 20px 40px 88px;
  background: #0f2534fa;
  color: #edf6fa;
  z-index: 60;
  overflow: auto;
  padding: 30px 38px;
  border: 1px solid #627f9259;
  border-radius: 16px;
  box-shadow: 0 20px 70px #0004;
}
body .gallery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
body .gallery-heading h1 {
  font-size: calc(29px * var(--text-scale, 1));
  letter-spacing: -0.8px;
  margin: 8px 0;
}
body .gallery-heading small {
  font-size: calc(10px * var(--text-scale, 1));
  color: #9db9c8;
  letter-spacing: 1.5px;
}
body .gallery-heading p,
.gallery-models p {
  color: #b0c5d0;
  font-size: calc(12px * var(--text-scale, 1));
}
body .gallery-heading button {
  padding: 10px 16px;
  background: #2c4858;
  color: white;
  white-space: nowrap;
}
body .site-presentation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
body .site-presentation {
  display: block;
  padding: 0;
  text-align: left;
  border: 1px solid #68889959;
  background: #1a3444;
  color: #edf6fa;
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
body .site-presentation:hover {
  border-color: #8ccece;
  transform: translateY(-2px);
}
body .site-presentation svg {
  display: block;
  width: 100%;
  height: 140px;
}
body .site-card-copy {
  display: flex;
  flex-direction: column;
  padding: 17px;
  gap: 9px;
}
body .site-card-copy small {
  font-size: calc(9px * var(--text-scale, 1));
  letter-spacing: 1.4px;
  color: #9ebecb;
}
body .site-card-copy strong {
  font-size: calc(17px * var(--text-scale, 1));
}
body .site-card-copy > span {
  font-size: calc(11px * var(--text-scale, 1));
  color: #b7cbd5;
  line-height: 1.5;
  min-height: 34px;
}
body .site-card-copy b {
  font-size: calc(11px * var(--text-scale, 1));
  color: #9de0d6;
  font-weight: 500;
}
body .gallery-models {
  margin: 26px 0;
}
body .gallery-models h2 {
  font-size: calc(18px * var(--text-scale, 1));
}
body .gallery-models > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
body .gallery-models button {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #253f50;
  color: #edf6fa;
  padding: 15px;
  text-align: left;
  min-width: 220px;
  border-radius: 8px;
}
body .gallery-models small {
  color: #accbd4;
}
body .other-sites summary {
  cursor: pointer;
  padding: 12px 0;
  color: #b2cbd6;
}
body.sites-open
  :is(
    .explorer,
    .inspector,
    .timeline-panel,
    .viewport-tools,
    .viewport-guide,
    .inspector-grip,
    .explorer-grip,
    .timeline-grip,
    #notice-stack,
    #selection-actions
  ) {
  visibility: hidden !important;
}
body.locked :is(.site-gallery, .selection-drawer, .selection-actions) {
  display: none !important;
}
body #notice-stack {
  max-height: 90px;
  bottom: calc(var(--timeline-height) + 45px);
}
body #notice-stack .notice-card:not(.warning):not(.critical) {
  display: none;
}
body .viewport-id {
  display: none;
}
body .viewport-guide {
  font-size: calc(10px * var(--text-scale, 1));
  opacity: 0.75;
}
@media (max-width: 1100px) {
  body .site-presentation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body .scene-geometry select {
    max-width: 180px;
  }
  body .site-gallery {
    padding: 24px;
  }
}
@media (max-width: 680px) {
  body .site-presentation-grid {
    grid-template-columns: 1fr;
  }
  body .site-gallery {
    inset: 130px 8px 30px 65px;
    padding: 18px;
  }
  body .gallery-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  body .tools-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body .scene-geometry span {
    display: none;
  }
  body .scene-geometry select {
    width: 110px;
  }
  body .layout-buttons {
    margin-left: 5px;
  }
  body .layout-buttons button {
    padding: 6px;
  }
  body .selection-drawer {
    top: 140px;
  }
}
/* Preserve the two primary task buttons at smaller widths. */
body[data-style] .layout-buttons {
  display: flex !important;
  flex-shrink: 0;
}
@media (max-width: 950px) {
  body[data-style="glassy"] .command-bar {
    right: 75px;
  }
  body[data-style] .scene-geometry select {
    max-width: 170px;
  }
  body[data-style] .work-domain select {
    max-width: 140px;
  }
}
@media (max-width: 680px) {
  body[data-style="glassy"] .command-bar {
    left: 70px;
    right: 60px;
    gap: 4px;
  }
  body[data-style] .scene-geometry select {
    width: 100px;
  }
  body[data-style] .work-domain select {
    max-width: 105px;
    font-size: calc(9px * var(--text-scale, 1));
  }
  body[data-style] .scene-geometry {
    margin-left: 0;
  }
}
body .asset-row .row-icon,
body .inspector .asset-symbol {
  display: none;
}
/* Shared dark surfaces apply before login and in every layout/theme. */
:root,
body,
body[data-style] {
  --ink: #edf5fa;
  --muted: #b3c8d3;
  --line: #54738566;
  --paper: #0b202e;
  --white: #132d3d;
  --readable-text: #edf5fa;
  --control-surface: #1b3748;
  color-scheme: dark;
}
body {
  background: #0b202e;
  color: #edf5fa;
}
body
  :is(
    button,
    [role="button"],
    .secondary,
    .small-button,
    .primary,
    input[type="submit"],
    input[type="button"]
  ) {
  background: #1b3748 !important;
  color: #edf5fa !important;
  border-color: #66899c99 !important;
}
body :is(button, [role="button"]) > * {
  color: inherit !important;
}
body :is(button, [role="button"]):hover {
  background: #2c5062 !important;
}
body :is(button.primary, input[type="submit"]) {
  background: #165951 !important;
  color: #f0fffc !important;
  border: 1px solid #70cbbd !important;
}
body
  :is(
    button.active,
    button[aria-selected="true"],
    button[aria-pressed="true"]
  ) {
  background: #174d50 !important;
  color: #edfffb !important;
  border-color: #7fdfd1 !important;
  box-shadow: inset 3px 0 #7fdfd1;
}
body button:disabled {
  background: #1c303d !important;
  color: #a7bbc7 !important;
  opacity: 1;
  cursor: not-allowed;
}
body :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #86e4d6;
  outline-offset: 3px;
}
body
  :is(
    .header,
    .rail,
    .explorer,
    .inspector,
    .timeline-panel,
    dialog,
    .selection-drawer,
    .viewport-heading-chip,
    .kpis article,
    .viewport-tools,
    .viewport-status,
    .toast,
    .notice,
    .detail-json,
    .plain-badge,
    .badge,
    .status-pill,
    .avatar,
    .explorer h2 span,
    .search,
    .segmented,
    .live-button,
    .play-button,
    .model-label,
    .settings-info,
    .list-card,
    .property-group,
    .camera-card,
    .chart-card,
    .metric-tiles article,
    .report-library article,
    .section-cards button,
    .map-notice,
    .companion-answer,
    .code-editor,
    .bim-toolbar,
    .local-map-title,
    .device-grid > section
  ) {
  background-color: #132d3d !important;
  color: #edf5fa !important;
  border-color: #66899c66 !important;
}
body
  :is(.notice.amber, .badge.alert, .secondary.warning, .notice-card.warning) {
  background: #292e50 !important;
  color: #e6deff !important;
  border-color: #9587cd !important;
}
body
  :is(
    .badge,
    .plain-badge,
    .status-pill,
    .inspector-badges span,
    .quality-pill,
    .tag,
    .metric-chip
  ) {
  background: #214253 !important;
  color: #e9f7fc !important;
}
body :is(h1, h2, h3, h4, h5, label, legend, summary, th, td, dt, dd) {
  color: #edf5fa;
}
body
  :is(
    .muted-text,
    .eyebrow,
    .tree-group,
    .chart-times,
    .detail-rows span,
    .inspector-note,
    .field-help,
    .settings-description,
    .section-cards span,
    .section-cards small
  ) {
  color: #b5cbd6;
}
body option {
  background: #152d3b;
  color: #edf5fa;
}
body a {
  color: #9bdfe9;
}
body
  :is(
    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip,
    .leaflet-control-attribution,
    .leaflet-bar a
  ) {
  background: #132d3d !important;
  color: #edf5fa !important;
}
body .classic-preview .mini-scene {
  background: #203c4d;
}
body :is(.classic-preview .mini-scene:before, .mini-scene:before) {
  background: #284b60;
  border-color: #779aa9;
}
body .notice-card {
  background: #132d3df5;
  color: #edf5fa;
}
/* Obvious, native-radio theme selection, with a textual saved/draft status. */
body .theme-fieldset {
  border: 0;
  padding: 0;
  margin: 18px 0;
  min-width: 0;
}
body .theme-fieldset legend {
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 600;
  margin-bottom: 12px;
}
body .theme-preview {
  background: #142c3b;
  border: 2px solid #536f80;
  min-height: 185px;
  border-radius: 12px;
}
body .theme-preview:has(input:checked) {
  background: #17434a;
  border-color: #8ce7d6;
  box-shadow: 0 0 0 2px #8ce7d633;
}
body .theme-preview:has(input:focus-visible) {
  outline: 2px solid #baf8ed;
  outline-offset: 4px;
}
body .theme-preview input {
  accent-color: #8ce7d6;
  height: 20px;
  width: 20px;
}
body .theme-selected {
  display: none;
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 8px;
  background: #145750;
  color: #edfffb;
  border: 1px solid #8ce7d6;
  border-radius: 6px;
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 600;
  z-index: 1;
}
body .theme-preview:has(input:checked) .theme-selected {
  display: block;
}
body .theme-preview small {
  opacity: 1;
  color: #bfd3dd;
  line-height: 1.5;
}
body .appearance-status {
  padding: 11px 13px;
  border: 1px solid #6a92a5;
  border-radius: 8px;
  background: #183b4b;
  color: #d7f6ee;
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 1.5;
}
/* Settings keeps categories visible while editing a panel. */
body dialog.settings-dialog {
  width: min(980px, 95vw);
}
body .settings-layout {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 24px;
  min-height: 420px;
}
body .settings-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid #66899c55;
  padding-right: 16px;
}
body .settings-nav button {
  text-align: left;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: calc(12px * var(--text-scale, 1));
}
body #settings-panel {
  min-width: 0;
}
body #settings-title {
  font-size: calc(21px * var(--text-scale, 1));
  margin: 0 0 8px;
}
body #settings-description {
  font-size: calc(12px * var(--text-scale, 1));
  color: #b8ccd6;
  margin-bottom: 22px;
  line-height: 1.5;
}
body #settings-pane {
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 1.7;
}
body #settings-pane h4 {
  font-size: calc(15px * var(--text-scale, 1));
}
body #settings-pane details {
  margin-top: 24px;
  padding: 12px;
  border: 1px solid #66899c66;
  border-radius: 9px;
}
body .settings-info {
  display: flex;
  flex-direction: column;
  padding: 17px;
  border: 1px solid #66899c66;
  border-radius: 10px;
  margin-bottom: 20px;
  gap: 4px;
}
body .settings-info strong {
  font-size: calc(21px * var(--text-scale, 1));
}
body .settings-actions {
  display: grid;
  gap: 8px;
}
body .settings-actions button {
  text-align: left;
  padding: 12px 16px;
  border: 1px solid #66899c66;
  border-radius: 8px;
}
/* A glass sign-in screen exists before any protected workspace is mounted. */
body.locked {
  min-height: 100dvh;
  background: #071722;
}
body.locked .lock-screen {
  background: radial-gradient(
    ellipse at 25% 20%,
    #1b5062 0%,
    #0d2636 38%,
    #071722 75%
  ) !important;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 38px 45px;
  gap: 4px;
}
body.locked .lock-screen img {
  width: 38px;
  height: 38px;
  animation: none;
}
body.locked .lock-screen h1 {
  font-size: calc(21px * var(--text-scale, 1));
  letter-spacing: 1px;
  margin: 8px 0;
}
body.locked .lock-screen p {
  max-width: 260px;
  line-height: 1.7;
  color: #aac7d7;
}
body.locked .lock-screen small {
  font-size: calc(9px * var(--text-scale, 1));
  color: #89aabf;
}
body.locked dialog,
body.locked[data-style] dialog {
  width: min(450px, 92vw);
  padding: 30px;
  background: linear-gradient(145deg, #183d50df, #0d2434f5) !important;
  border: 1px solid #8ac0d36b;
  box-shadow:
    0 32px 100px #0008,
    inset 0 1px #d3f4ff22;
  backdrop-filter: blur(32px);
  border-radius: 22px;
}
body.locked dialog::backdrop {
  background: #04121b45;
  backdrop-filter: blur(4px);
}
body.locked #close-dialog {
  display: none;
}
body.locked .dialog-heading h2 {
  font-size: calc(29px * var(--text-scale, 1));
  letter-spacing: -0.6px;
  margin-top: 8px;
}
body.locked .dialog-heading {
  border-bottom: 1px solid #80a9bd33;
  padding-bottom: 18px;
  margin-bottom: 20px;
}
body.locked #auth-form .form-grid {
  grid-template-columns: 1fr;
  gap: 18px;
}
body.locked #auth-form input {
  min-height: 45px;
  border-radius: 9px;
  padding: 11px 13px;
}
body.locked #auth-form .primary {
  width: 100%;
  justify-content: center;
  min-height: 46px;
  font-size: calc(13px * var(--text-scale, 1));
  border-radius: 9px;
}
body.locked .tab-actions {
  margin: 17px 0;
}
body.locked .tab-actions button {
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
}
body.locked .notice {
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 1.7;
  border-radius: 10px;
}
@media (max-width: 700px) {
  body .settings-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  body .settings-nav {
    flex-direction: row;
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid #66899c55;
    padding: 0 0 12px;
  }
  body .settings-nav button {
    white-space: nowrap;
  }
  body.locked .lock-screen {
    padding: 20px;
  }
  body.locked .lock-screen p,
  body.locked .lock-screen small {
    display: none;
  }
  body .theme-previews {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body .theme-preview {
    padding: 13px;
  }
}
body .mini-scene::before,
body .classic-preview .mini-scene::before {
  background: #284b60 !important;
  border-color: #779aa9;
}
body :is(p, small, span, em, strong, code) {
  color: inherit;
}
body #appearance-status {
  color: #d7f6ee !important;
}
body.locked .tab-actions:not(:has(#tab-setup)) {
  display: none;
}
body .settings-layout {
  height: min(580px, calc(88dvh - 135px));
  min-height: 280px;
}
body .settings-nav,
body #settings-panel {
  overflow-y: auto;
  scrollbar-width: thin;
}
body #settings-panel {
  padding-right: 12px;
}
@media (max-width: 700px) {
  body .settings-layout {
    height: auto;
  }
  body #settings-panel {
    max-height: 55dvh;
  }
  body .settings-nav {
    overflow-x: auto;
    overflow-y: hidden;
  }
}
body input[type="checkbox"],
body input[type="radio"] {
  background-color: #183444 !important;
  accent-color: #75d8c8;
  color-scheme: dark;
}
body .viewport-status.following-status {
  position: fixed;
  inset: auto auto calc(var(--timeline-height) + 45px)
    calc(var(--explorer-width) + 105px);
  padding: 8px 12px;
  font-size: calc(11px * var(--text-scale, 1));
  pointer-events: none;
  max-width: 50vw;
}
/* A single explorer: components plus their model sources. */
body .explorer-tabs {
  display: block;
  padding: 8px 12px;
}
body .explorer-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}
body .explorer-content .asset-tree {
  max-height: none;
  overflow: visible;
  min-height: auto;
  flex: none;
}
body #site-scene {
  width: 100%;
  padding: 9px;
  font-size: calc(12px * var(--text-scale, 1));
  border: 1px solid #6ca7b7 !important;
}
body .model-sources {
  border-top: 1px solid #597786;
  margin-top: 12px;
}
body .model-sources summary {
  padding: 14px 12px;
  cursor: pointer;
  color: #d8edf5;
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 650;
}
body .model-sources p {
  padding: 0 12px;
  font-size: calc(12px * var(--text-scale, 1));
  color: #b6ccd7;
  line-height: 1.5;
}
body .model-sources small {
  font-size: calc(11px * var(--text-scale, 1));
}
body .asset-row.active {
  box-shadow: inset 4px 0 #67e2fa;
  background: #164c61 !important;
  border: 1px solid #67c9e5 !important;
}
/* Handles explain the dividers instead of resembling unexplained scene objects. */
body .resize-grip {
  width: 12px;
  z-index: 72;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .resize-grip > span {
  border: 1px solid #668fa6;
  background: #173548;
  color: #d7f1ff;
  border-radius: 7px;
  padding: 13px 1px;
  font-size: calc(12px * var(--text-scale, 1));
  box-shadow: 0 3px 10px #0005;
}
body .resize-grip:hover {
  background: transparent;
}
body .bim-row button {
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 1.45;
}
body .bim-row small,
body .tree-level,
body .tree-group {
  font-size: calc(11px * var(--text-scale, 1));
}
body .resize-grip:hover > span,
body .resize-grip:focus-visible > span {
  background: #21516a;
  border-color: #79d7f2;
}
body .resize-grip:focus-visible {
  outline: 2px solid #79d7f2;
  outline-offset: 1px;
}
body .timeline-grip {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  height: 24px;
  top: -20px;
  border: 0;
  z-index: 72;
  background: transparent;
}
body .timeline-grip > span {
  display: block;
  padding: 4px 12px;
  border: 1px solid #668fa6;
  border-radius: 7px 7px 0 0;
  background: #173548;
  color: #d7f1ff;
  font-size: calc(11px * var(--text-scale, 1));
  white-space: nowrap;
}
body .timeline-grip:hover > span,
body .timeline-grip:focus-visible > span {
  background: #21516a;
  border-color: #79d7f2;
}
/* Readable scene header; wrap the mode switch rather than shrinking the type. */
body[data-style="glassy"] .viewport-top {
  height: auto;
  grid-template-columns: minmax(85px, 1fr) minmax(240px, 2fr);
  align-items: start;
}
body[data-style="glassy"] .viewport-top .viewport-heading-chip {
  height: 44px;
  font-size: calc(12px * var(--text-scale, 1));
}
body[data-style="glassy"] .viewport-top .kpis article {
  height: 44px;
  padding: 4px 7px;
}
body[data-style="glassy"] .viewport-top .kpis article > span {
  font-size: calc(11px * var(--text-scale, 1));
  opacity: 1;
  color: #c5dce7;
}
body[data-style="glassy"] .viewport-top .kpis article > div {
  font-size: calc(15px * var(--text-scale, 1));
}
body[data-style="glassy"] .viewport-top .kpis small {
  font-size: calc(11px * var(--text-scale, 1));
}
body[data-style="glassy"] .viewport-top .segmented {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 0;
}
body[data-style="glassy"] .viewport-top .segmented button {
  font-size: calc(12px * var(--text-scale, 1));
  padding: 7px 10px;
}
body .viewport-guide,
body .scene-geometry,
body .scene-geometry select,
body #compact-project-name {
  font-size: calc(12px * var(--text-scale, 1));
}
body .viewport-alert,
body .viewport-alert.warning {
  background: #292e50;
  color: #e6deff;
  border-color: #9587cd;
}
body[data-style="classic"] .kpis article {
  height: 48px;
  min-height: 0;
  padding: 5px 10px;
}
body[data-style="classic"] .kpis article > span {
  font-size: calc(11px * var(--text-scale, 1));
}
body[data-style="classic"] .kpis article > div {
  font-size: calc(16px * var(--text-scale, 1));
  margin: 2px 0;
}
body[data-style="classic"] .kpis small {
  font-size: calc(11px * var(--text-scale, 1));
}
body[data-style="classic"] .kpis footer {
  display: none;
}
body[data-style="classic"] .viewport-tools {
  top: 112px;
  bottom: auto;
}
@media (min-width: 1600px) {
  body[data-style="glassy"] .viewport-top {
    grid-template-columns: minmax(100px, 1fr) minmax(270px, 2fr) max-content;
  }
  body[data-style="glassy"] .viewport-top .segmented {
    grid-column: auto;
  }
}
@media (max-width: 950px) {
  body[data-style="glassy"] .viewport-top {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-style="glassy"] .viewport-top .viewport-heading-chip {
    display: none;
  }
}