/*
  JARVIS density profile base.
  These files override layout dimensions per display class instead of scaling
  the whole interface with transforms.
*/

:root {
  --density-profile: "auto";
  --density-safe-pad: 18px;
  --density-grid-gap: 18px;
  --density-left-rail: 216px;
  --density-right-rail: 430px;
  --density-stage-min: 680px;
  --density-stage-max: none;
  --density-core-size: min(62vw, 600px);
  --density-holo-width: min(72vw, 720px);
  --density-holo-height: min(58vw, 560px);
  --density-panel-pad: 16px;
  --density-card-pad: 14px;
  --density-ribbon-min: 52px;
  --density-ribbon-columns: repeat(8, minmax(0, 1fr)) 180px;
}

body {
  min-width: 0;
}

.desktop-shell {
  padding: var(--density-safe-pad);
  gap: var(--density-grid-gap);
  grid-template-columns: var(--density-left-rail) minmax(0, 1fr) var(--density-right-rail);
}

.system-ribbon {
  min-height: var(--density-ribbon-min);
  grid-template-columns: var(--density-ribbon-columns);
}

.action-rail,
.operations-pane,
.audit-pane {
  padding: var(--density-panel-pad);
}

.holo-panel,
.trace-card,
.metric-node {
  padding: var(--density-card-pad);
}

.hologram-stage {
  min-height: var(--density-stage-min);
  max-height: var(--density-stage-max);
}

.holo-engine-canvas {
  width: var(--density-holo-width);
  height: var(--density-holo-height);
}

.reactor-hud {
  width: var(--density-core-size);
}

.operations-pane,
.audit-pane,
.system-ribbon,
.action-rail,
.holo-panel {
  contain: layout paint;
}

.process-console,
.interaction-status,
.gesture-video,
.gesture-canvas,
.holo-engine-canvas,
.reactor-hud {
  contain: layout paint style;
}

.mode-button,
.rail-button,
.ptt-button,
.orbit-dot {
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 901px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .desktop-shell {
    height: 100vh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .action-rail,
  .operations-pane,
  .audit-pane {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.42) rgba(3, 12, 16, 0.28);
  }

  .action-rail {
    position: relative;
    top: auto;
    height: auto;
  }

  .hologram-stage {
    min-height: min(var(--density-stage-min), calc(100vh - 248px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .holo-engine-canvas,
  .reactor-hud,
  .vehicle-holo {
    transition-duration: 80ms !important;
  }
}