/******************
 * Explorer stage *
 ******************/

/* full-bleed graph, everything else floats over it */
.explorer {
  --gap: var(--header-gap);
  --bar: 64px;
  /* shared control size, except the search pill */
  --control: 36px;

  /* presence */
  position: relative;
  width: 100%;
  height: var(--vh);
  min-height: 480px;
  overflow: hidden;

  /* font */
  font-size: 15px;
  line-height: 1.4;
}


/***********
 * Top bar *
 ***********/

.explorer-bar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.explorer-bar>* {
  pointer-events: auto;
}

/* repo icon, right-aligned */
.explorer-repo {
  display: grid;
  place-items: center;
  width: var(--control);
  height: var(--control);
  margin-left: auto;
}

.explorer-repo img {
  width: 30px;
  height: 30px;
}


/**************
 * Graph area *
 **************/

.explorer-graph {
  position: absolute;
  inset: 0;
}

#graph {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  transition: opacity .3s ease;
}

#graph.is-pointing {
  cursor: pointer;
}

#graph:active {
  cursor: grabbing;
}

#graph:focus {
  outline: none;
}

#graph:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

/* dim while loading */
.explorer[aria-busy="true"] #graph {
  opacity: .4;
}


/************
 * Controls *
 ************/

.explorer button,
.explorer select,
.explorer textarea {
  border: 0;
  padding: 8px 14px;
  background: var(--card);
  box-shadow: 0 2px 6px rgb(0 0 0 / .08);
  color: var(--ink);
  font: inherit;
}

/* custom chevron, vertically centred */
.explorer select {
  appearance: none;
  padding-right: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231a1a1a' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center / 10px 6px no-repeat, var(--card);
  line-height: 1.4;
}

.explorer-datasets button,
.explorer select {
  height: var(--control);
  padding-top: 0;
  padding-bottom: 0;
}

.explorer button,
.explorer select {
  cursor: pointer;
  transition: background-color .3s ease;
}

.explorer button:is(:hover, :focus-visible),
.explorer select:is(:hover, :focus-visible) {
  background-color: #e5e5e5;
}

.explorer button[aria-pressed="true"] {
  background: var(--green);
}

.explorer button:disabled {
  opacity: .5;
  cursor: wait;
}

.explorer-datasets {
  position: absolute;
  z-index: 1;
  top: calc(var(--bar) + var(--gap) / 2);
  left: var(--gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.explorer-hackathon {
  display: flex;
  gap: 8px;
}

.explorer-hackathon[hidden] {
  display: none;
}

/* category legend */
.explorer-legend {
  position: absolute;
  z-index: 1;
  top: calc(var(--bar) + var(--gap) / 2);
  right: var(--gap);
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.explorer-legend li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.explorer-legend li::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .25);
}


/**************
 * Text input *
 **************/

.explorer-input {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: var(--gap);
  width: min(720px, 100% - 2 * var(--gap));
  transform: translateX(-50%);
}

.explorer-selection {
  max-height: 9em;
  overflow: auto;
  overflow-wrap: anywhere;
  margin-bottom: 8px;
  padding: 10px 16px;
  background: rgb(255 255 255 / .85);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgb(0 0 0 / .08);
  font-size: 14px;
}

/* category, dotted in its legend colour */
.explorer-category {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
}

.explorer-category::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .25);
}

/* gold tag, same as the ring on winners */
.explorer-winner {
  margin-left: 6px;
  padding: 1px 8px;
  border: 1.5px solid #d4a017;
  color: #8a6500;
}

/* whole card is the link */
.explorer-link {
  display: block;
  margin: -10px -16px;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
  transition: background-color .3s ease;
}

.explorer-link:hover,
.explorer-link:focus-visible {
  background: rgb(0 0 0 / .05);
}

.explorer-link strong::after {
  content: " ↗";
  opacity: .5;
}

.explorer-selection strong {
  font-weight: 600;
}

.explorer-selection small {
  opacity: .6;
}

.explorer-selection p {
  margin: 4px 0 0;
}

/* nearest points to the embedded text, clickable */
.explorer-neighbours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.explorer .explorer-neighbours button {
  padding: 2px 10px;
  box-shadow: none;
  background: #eee;
  font-size: 13px;
}

#embed-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 2px 6px rgb(0 0 0 / .08);
}

.explorer #description {
  flex: 1;
  min-width: 0;
  max-height: 6em;
  padding-left: 16px;
  overflow: hidden;
  field-sizing: content;
  resize: none;
  box-shadow: none;
}

.explorer #description:focus {
  outline: none;
}

.explorer-modes {
  display: contents;
}

.explorer .explorer-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
}

.explorer-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.explorer-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0 8px;
  font-size: 13px;
  color: #666;
}

.explorer-hint {
  margin-left: auto;
}

.explorer #reset {
  padding: 4px 12px;
  font-size: 13px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (max-width: 600px) {

  .explorer-title,
  .explorer-hint {
    display: none;
  }

  /* legend wraps above the input so the selection card fits */
  .explorer-legend {
    top: auto;
    bottom: calc(var(--gap) + 112px);
    left: var(--gap);
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 11px;
  }

  .explorer-legend li {
    flex-direction: row-reverse;
    gap: 4px;
  }

  .explorer:has(#selection:not([hidden])) .explorer-legend {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .explorer-home,
  .explorer button,
  .explorer select,
  .explorer-link,
  #graph {
    transition: none;
  }
}