.gpu-index-detail-stage {
  position: relative;
}

.desk-data-rail {
  --desk-data-surface: var(--desk-canvas);
  --desk-data-rule: color-mix(in srgb, var(--desk-accent-deep) 16%, transparent);
  position: relative;
  margin-top: 24px;
  scroll-margin-block: 24px;
  z-index: 1;
  overflow: hidden;
  color: var(--index-ink);
  font-family: "Geist Mono", ui-monospace, monospace;
  background: var(--desk-data-surface);
  border: 1px solid var(--desk-data-rule);
  border-radius: var(--desk-radius-panel);
  box-shadow: none;
}

.desk-data-rail[hidden],
:root:not([data-desk-view="monitor"]) .desk-data-rail,
.gpu-index:not([data-workspace-mode="detail"]) .desk-data-rail {
  display: none;
}

.desk-data-rail__toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  color: var(--index-ink-soft);
  font: 600 12px/16px "Geist Mono", ui-monospace, monospace;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition:
    color 200ms var(--desk-ease-out),
    background-color 200ms var(--desk-ease-out),
    transform 200ms var(--desk-ease-out);
}

.desk-data-rail__toggle > strong,
.desk-data-rail__toggle > span,
.desk-data-rail__toggle > small {
  min-width: 0;
  overflow: hidden;
  color: var(--index-ink-soft);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desk-data-rail__toggle > strong {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desk-data-rail__toggle > span {
  color: var(--index-ink);
  letter-spacing: -0.01em;
}

.desk-data-rail__toggle > small {
  justify-self: end;
  font-weight: 500;
}

.desk-data-rail__toggle::after {
  width: 16px;
  content: "+";
  font: 500 12px/16px "Geist Mono", ui-monospace, monospace;
  text-align: center;
}

.desk-data-rail__toggle[aria-expanded="true"]::after {
  content: "−";
}

/* The plot and its source disclosure share one outer frame. */
.gpu-index-detail-stage:has(> [data-monitor-data]:not([hidden])) {
  border-radius: var(--desk-radius-panel);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--desk-accent-deep) 12%, transparent);
}

.gpu-index-detail-stage:has(> [data-monitor-data]:not([hidden])) > .gpu-index-detail {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-color: color-mix(in srgb, var(--desk-accent-deep) 16%, transparent);
  box-shadow: none;
}

.desk-data-rail[data-monitor-data] {
  margin-top: 0;
  background: var(--desk-chrome-surface);
  border-color: color-mix(in srgb, var(--desk-accent-deep) 52%, transparent);
  border-top: 0;
  border-radius: 0 0 var(--desk-radius-panel) var(--desk-radius-panel);
}

[data-monitor-data] .desk-data-rail__toggle {
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 0;
  font-weight: 500;
}

[data-monitor-data] .desk-data-rail__body {
  background: var(--desk-data-surface);
}

[data-monitor-data] .desk-data-rail__toggle > strong {
  color: var(--desk-control-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

[data-monitor-data] .desk-data-rail__toggle > span {
  color: var(--index-ink-soft);
}

[data-monitor-data] .desk-data-rail__toggle > small {
  color: var(--index-muted);
}

.desk-data-rail__description {
  margin: 0;
  padding: 12px 16px;
  color: var(--index-ink-soft);
  font: 500 12px/16px "Geist Mono", ui-monospace, monospace;
  text-wrap: pretty;
}

.desk-data-rail__description:empty {
  display: none;
}

.desk-data-rail__body {
  border-top: 1px solid var(--desk-data-rule);
  animation: desk-data-rail-enter 240ms cubic-bezier(0.32, 0.72, 0, 1);
}

.desk-data-rail__path {
  min-height: 48px;
  padding: 8px 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--desk-data-rule);
  scrollbar-width: none;
}

.desk-data-rail__path::-webkit-scrollbar {
  display: none;
}

.desk-data-rail__path ol {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: max-content;
  padding: 0;
  margin: 0;
  list-style: none;
}

.desk-data-rail__path li {
  display: flex;
  gap: 8px;
  align-items: center;
}

.desk-data-rail__path li + li::before {
  color: color-mix(in srgb, var(--index-ink-soft) 56%, transparent);
  content: "›";
  font: 500 14px/20px "Geist Mono", ui-monospace, monospace;
}

.desk-data-rail__path li > span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 12px;
  color: var(--index-ink-soft);
  font: 500 12px/16px "Geist Mono", ui-monospace, monospace;
  white-space: nowrap;
  background: color-mix(in srgb, var(--desk-accent) 6%, transparent);
  border-radius: 4px;
}

.desk-data-rail__path li:first-child > span,
.desk-data-rail__path [aria-current="page"] {
  color: var(--index-ink);
  background: color-mix(in srgb, var(--desk-accent) 10%, transparent);
}

.desk-data-rail__workspace {
  padding: 24px 16px 32px;
}

.desk-data-rail [data-monitor-data-api][hidden],
.desk-data-rail [data-monitor-data-source][hidden],
.desk-data-rail [data-monitor-data-source-link][hidden] {
  display: none;
}

.desk-data-rail__source {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px;
  color: var(--index-ink-soft);
  font: 500 12px/16px "Geist Mono", ui-monospace, monospace;
}

.desk-data-rail__source p {
  margin: 0;
  color: inherit;
  font: inherit;
}

.desk-data-rail__source a {
  color: var(--index-ink);
  text-underline-offset: 4px;
}

.desk-data-rail__action-label {
  margin: 0 0 16px;
  color: var(--index-ink-soft);
  font: 500 14px/20px "Geist Mono", ui-monospace, monospace;
  text-align: center;
}

.desk-data-rail__command {
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--desk-accent) 4%, transparent);
  border: 1px solid var(--desk-data-rule);
  border-radius: 4px;
}

.desk-data-rail pre {
  box-sizing: border-box;
  block-size: 224px;
  max-block-size: none;
  padding: 32px;
  margin: 0;
  overflow: auto;
  color: var(--index-ink);
  font: 500 14px/20px "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: pre;
  overflow-wrap: normal;
  scrollbar-color:
    color-mix(in srgb, var(--desk-accent-deep) 24%, transparent)
    transparent;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  tab-size: 2;
}

.desk-data-rail__sql-token--keyword {
  color: var(--desk-accent-deep);
  font-weight: 650;
}

.desk-data-rail__sql-token--function {
  color: color-mix(in srgb, var(--desk-accent-deep) 74%, var(--index-ink));
}

.desk-data-rail__sql-token--string {
  color: color-mix(in srgb, var(--desk-accent-deep) 64%, var(--index-ink-soft));
}

.desk-data-rail__sql-token--number {
  color: color-mix(in srgb, var(--desk-accent) 52%, var(--index-ink-soft));
}

.desk-data-rail__sql-token--comment {
  color: var(--index-ink-soft);
  opacity: 0.68;
}

.desk-data-rail__resources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.desk-data-rail__footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border-top: 1px solid var(--desk-data-rule);
}

.desk-data-rail__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
}

.desk-data-rail__footer :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--index-ink-soft);
  font: 500 12px/16px "Geist Mono", ui-monospace, monospace;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--desk-radius-control);
  transition:
    color 200ms var(--desk-ease-out),
    background-color 200ms var(--desk-ease-out),
    transform 200ms var(--desk-ease-out);
}

.desk-data-rail__footer [data-monitor-data-copy] {
  color: var(--index-ink);
  font-weight: 600;
}

.desk-data-rail__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.desk-data-rail :is(button, a, pre, nav):focus-visible {
  outline: 2px solid var(--desk-accent-deep);
  outline-offset: -2px;
}

.desk-data-rail :is(button, a):active {
  transform: translateY(1px);
}

@keyframes desk-data-rail-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: hover) and (pointer: fine) {
  .desk-data-rail__toggle:hover,
  .desk-data-rail__resources a:hover,
  .desk-data-rail__footer :is(a, button):hover {
    color: var(--index-ink);
    background: color-mix(in srgb, var(--desk-accent) 8%, transparent);
  }
}

@media (max-width: 640px) {
  [data-monitor-data] .desk-data-rail__toggle {
    min-height: 40px;
  }

  .desk-data-rail__description {
    padding-inline: 12px;
  }

  .desk-data-rail {
    margin-top: 16px;
    scroll-margin-block: 16px;
  }

  .desk-data-rail__toggle {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 12px;
  }

  .desk-data-rail__toggle > small,
  .desk-data-rail__path {
    display: none;
  }

  .desk-data-rail__workspace {
    padding: 16px;
  }

  .desk-data-rail__action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .desk-data-rail__command {
    background: color-mix(in srgb, var(--desk-accent) 6%, transparent);
    border: 0;
    border-radius: 2px;
  }

  .desk-data-rail pre {
    block-size: auto;
    min-block-size: 112px;
    max-block-size: 192px;
    padding: 16px;
    font-size: 12px;
    line-height: 16px;
  }

  .desk-data-rail__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }

  .desk-data-rail__resources,
  .desk-data-rail__actions {
    display: grid;
    min-height: 48px;
    gap: 0;
    align-items: stretch;
  }

  .desk-data-rail__resources {
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--desk-data-rule);
  }

  .desk-data-rail__actions {
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desk-data-rail__footer :is(a, button) {
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding-inline: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desk-data-rail__resources a + a,
  .desk-data-rail__actions button + button {
    border-left: 1px solid var(--desk-data-rule);
  }

  .desk-data-rail__footer [data-monitor-data-copy] {
    background: color-mix(in srgb, var(--desk-accent) 6%, transparent);
  }
}

@media (max-width: 420px) {
  .desk-data-rail__toggle,
  .desk-data-rail:not(.deal-journey-rail) .desk-data-rail__description {
    padding-inline: 8px;
  }
}

@media (max-width: 360px) {
  .desk-data-rail__path li:first-child,
  .desk-data-rail__path li:nth-child(2)::before {
    display: none;
  }
}

@media (max-height: 600px) {
  .desk-data-rail pre {
    block-size: min(192px, calc(40dvh + 48px));
  }
}

@media (prefers-contrast: more) {
  .desk-data-rail,
  .desk-data-rail__command {
    border-color: var(--desk-accent-deep);
  }

  .desk-data-rail__sql-token {
    color: currentColor;
  }

  .desk-data-rail[data-monitor-data] {
    border-color: var(--desk-accent-deep);
  }

  .desk-data-rail :is(.desk-data-rail__body, .desk-data-rail__path, .desk-data-rail__resources, .desk-data-rail__footer) {
    border-color: var(--index-rule-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-data-rail__body,
  .desk-data-rail :is(button, a) {
    animation: none;
    transition: none;
  }
}
.desk-data-rail__calculation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
  margin: 0;
  padding: 16px 24px;
  font: 500 12px/16px "Geist Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.desk-data-rail__calculation > div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.desk-data-rail__calculation dt { opacity: .6; }
.desk-data-rail__calculation dd { margin: 0; }

@media (max-width: 640px) {
  .desk-data-rail__calculation { grid-template-columns: 1fr; }
}