/* Trace overlays */
.site-trace[hidden] {
  display: none;
}
.site-trace__hover,
.site-trace__selected {
  position: fixed;
  z-index: var(--qf-z-tooltip);
  pointer-events: none;
  border-radius: var(--qf-radius-xs);
}
.site-trace__hover {
  outline: calc(var(--qf-border-width) * 2) dashed var(--qf-color-info-main);
  outline-offset: var(--qf-border-width);
  background: color-mix(in srgb, var(--qf-color-info-main) 8%, transparent);
}
.site-trace__selected {
  outline: calc(var(--qf-border-width) * 2) solid var(--qf-color-warning-main);
  outline-offset: calc(var(--qf-border-width) * 2);
}
.site-trace__label {
  position: fixed;
  z-index: var(--qf-z-tooltip);
  pointer-events: none;
  max-width: min(60vw, calc(var(--qf-space-10) * 16));
  padding: calc(var(--qf-space-1) / 2) var(--qf-space-2);
  border-radius: var(--qf-radius-xs);
  background: var(--qf-color-info-main);
  color: var(--qf-color-info-contrast);
  font-family: var(--qf-font-family-mono);
  font-size: var(--qf-text-xs);
  line-height: var(--qf-leading-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trace comment panel */
.site-trace__panel {
  position: fixed;
  z-index: var(--qf-z-popover);
  width: min(calc(var(--qf-space-10) * 11), calc(100vw - var(--qf-space-4)));
  display: flex;
  flex-direction: column;
  gap: var(--qf-space-2);
  padding: var(--qf-space-3);
  background: var(--qf-surface-raised);
  color: var(--qf-ink);
  border: var(--qf-border-width) solid var(--qf-border-strong);
  border-radius: var(--qf-radius-card);
  box-shadow: var(--qf-shadow-lg);
}
.site-trace__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--qf-space-1);
  font-family: var(--qf-font-family-mono);
  font-size: var(--qf-text-xs);
}
.site-trace__crumb {
  border: 0;
  padding: calc(var(--qf-space-1) / 2) var(--qf-space-2);
  border-radius: var(--qf-radius-xs);
  background: transparent;
  color: var(--qf-ink-secondary);
  font: inherit;
  cursor: pointer;
}
.site-trace__crumb:hover {
  background: var(--qf-surface-hover);
  color: var(--qf-ink);
}
.site-trace__crumb[aria-current='true'] {
  background: var(--qf-surface-selected);
  color: var(--qf-ink);
}
.site-trace__crumb + .site-trace__crumb::before {
  content: '›';
  margin-inline-end: var(--qf-space-1);
  color: var(--qf-ink-muted);
}
.site-trace__field {
  display: grid;
  gap: var(--qf-space-1);
  font-size: var(--qf-text-sm);
}
.site-trace__field textarea {
  font: inherit;
  resize: vertical;
  padding: var(--qf-space-2);
  border: var(--qf-border-width) solid var(--qf-border);
  border-radius: var(--qf-radius-control);
  background: var(--qf-surface);
  color: var(--qf-ink);
}
.site-trace__actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--qf-space-2);
}
.site-trace__status {
  margin-inline-end: auto;
  font-size: var(--qf-text-xs);
  color: var(--qf-ink-muted);
}

/* Trace warning */
.site-trace__warning {
  position: fixed;
  inset-block-end: var(--qf-space-4);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--qf-z-toast);
  display: flex;
  align-items: center;
  gap: var(--qf-space-3);
  max-width: min(calc(var(--qf-space-10) * 16), calc(100vw - var(--qf-space-8)));
  padding: var(--qf-space-2) var(--qf-space-3);
  background: var(--qf-color-warning-main);
  color: var(--qf-color-warning-contrast);
  border-radius: var(--qf-radius-card);
  box-shadow: var(--qf-shadow-lg);
  font-size: var(--qf-text-sm);
}
.site-trace__warning .qf-button {
  color: inherit;
  flex: none;
}