/* Profiler: an empty state until uploads open, as a Mac app shows when it has nothing to list, in the middle of the page */
#profiler:not([hidden]) { display: flex; }
#profiler .prof-inner { flex: 1; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 6vh; }  /* a little above center, where the eye expects it */
.prof-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px;
  text-align: center;
}
.prof-drop-icon { width: 48px; height: 48px; fill: none; stroke: var(--color-label); opacity: .3; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.prof-drop-title { margin: 16px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--color-label); }
.prof-drop-text { margin: 6px 0 0; max-width: 360px; font-size: 15px; line-height: 1.45; color: var(--color-label-secondary); }
/* Open Trace…: a bordered capsule in the accent color, as a sheet's secondary button; the ellipsis says a dialog follows */
.prof-choose {
  margin-top: 18px; height: 32px; padding: 0 16px; border: 0; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent); cursor: pointer;
}
.prof-choose:hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.prof-choose:active { background: color-mix(in srgb, var(--color-accent) 24%, transparent); }
/* a file held over the page: an inset accent ring and a faint wash, the icon in the accent */
#profiler.is-dropping { box-shadow: inset 0 0 0 3px var(--color-accent); background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
#profiler.is-dropping .prof-drop-icon { stroke: var(--color-accent); opacity: 1; }
#profiler.is-dropping .prof-drop > * { pointer-events: none; }