/* HUD: coordinates, zoom, colourway, bookmarks, and the go-to and Julia
   forms. The panel surface, chips and inputs come from design/chrome.css. */

/* How wide the panel may grow. The key list in the opposite corner reads this
   to work out what room is left, so it lives on :root rather than in here. */
:root { --hud-w: 52ch; }

.hud {
  position: absolute;
  z-index: 1;
  left: 0.75rem;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  padding: 0.6rem 0.8rem;
  display: grid;
  gap: 0.15rem;
  max-width: min(calc(100vw - 1.5rem), var(--hud-w));
}

.hud-body {
  display: grid;
  gap: 0.15rem;
}

.hud-body[hidden] { display: none; }

.hud-toggle {
  justify-self: start;
  margin-top: 0.35rem;
  color: var(--dim);
  border-bottom: 1px dotted transparent;
}

.hud-toggle:hover { color: var(--ink); border-color: var(--dim); }

.hud.collapsed { padding: 0.35rem 0.6rem; }
.hud.collapsed .hud-toggle { margin-top: 0; }

.hud-row { white-space: normal; overflow-wrap: anywhere; }
.hud-c { font-size: 1.1rem; word-break: break-all; max-width: 44ch; }
.hud-k { color: var(--dim); display: inline-block; min-width: 4ch; }
.hud-dim { color: var(--dim); }

.hud-bookmarks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.hud-bookmarks:empty { display: none; }

/* Colourway chips: each group is its name with the chips underneath. */
.palette-groups { display: grid; gap: 0.3rem; margin-top: 0.35rem; }
.palette-group { display: grid; gap: 0.1rem; }
.palette-group-name { color: var(--dim); }
.palette-chips { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; }

/* Iterations: the count and its mode on one line, the slider under them. The
   slider is logarithmic, so a drag crosses the whole budget. */
.iter-slider {
  width: 100%;
  margin: 0.1rem 0 0.25rem;
  accent-color: var(--magenta);
  cursor: pointer;
}

.iter-mode {
  color: var(--dim);
  border-bottom: 1px dotted var(--dim);
}

.iter-mode:hover { color: var(--ink); border-color: var(--ink); }
.iter-mode[data-mode="fixed"] { color: var(--magenta); border-color: var(--magenta); }

/* The coordinate and zoom lines open the go-to form. */
.hud-edit {
  text-align: left;
  border-bottom: 1px dotted transparent;
  cursor: text;
}

.hud-edit:hover { border-color: var(--dim); }

.goto,
.julia,
.vars {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.goto[hidden],
.julia[hidden],
.vars[hidden] { display: none; }

/* The variables a typed formula holds at a value. Each is a letter and the
   pair of numbers behind it, which the timeline moves between keyframes. */
.vars-rows { display: grid; gap: 0.25rem; }

.vars-row {
  display: grid;
  grid-template-columns: 4ch 1fr auto 1fr auto;
  align-items: center;
  gap: 0.3rem;
}

.vars-op { color: var(--dim); }
.vars-title { min-width: 0; }
.vars .goto-error:empty { display: none; }

/* Julia's C: the Mandelbrot map it is picked off, two inputs, and the named
   parameters from the original. */
.julia .hud-bookmarks { margin-top: 0.15rem; }
.julia .goto-error:empty { display: none; }

/* Every C is a point of the Mandelbrot plane, so that set is the picker. It
   is square because the set is. */
.minimap {
  display: block;
  width: 11rem;
  height: 11rem;
  justify-self: start;
  border: 1px solid var(--line);
  background: #000;
  cursor: crosshair;
  touch-action: none;
}

.minimap:hover { border-color: var(--dim); }

.goto-row {
  display: grid;
  grid-template-columns: 4ch 1fr;
  align-items: center;
  gap: 0.4rem;
}

.goto-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.goto-error { color: var(--magenta); }

.bookmark {
  color: var(--dim);
  border-bottom: 1px dotted var(--dim);
}

.bookmark:hover { color: var(--magenta); border-color: var(--magenta); }

@media (max-width: 720px) {
  .hud { max-width: calc(100vw - 1.5rem); }
  .hud-c { font-size: 0.9rem; }
  /* The HUD owns the bottom of a narrow screen, so the map is smaller there. */
  .minimap { width: 8rem; height: 8rem; }
}