/* SMACSS Module: the dock — the control surface at the left edge, at the foot of
   a narrow screen. One tile per group of controls; hovering a tile names it,
   clicking it opens the card beside it that holds the controls themselves. Only
   one card stands open at a time, as a class on the tile. */
.dock {
  position: absolute;
  z-index: 13;
  left: calc(var(--dock-inset) + env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  padding: var(--space-s);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(8px);
}

.dock-tile {
  position: relative;
  display: flex;
}

/* The tiles stand in one another's border rather than each drawing its own, so
   the row reads as a single ruled strip. */
.dock-tile + .dock-tile {
  margin-top: -1px;
}

/* The tiles that work the view stand apart from those that work the app. */
.dock-tile[data-group="view"] + .dock-tile[data-group="app"] {
  margin-top: var(--space-m);
}

/* Lifted over its neighbours, so the border it is highlighted by stays whole. */
.dock-tile:hover,
.dock-tile.is-open {
  z-index: 1;
}

.dock-tile-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dock-tile);
  height: var(--dock-tile);
  padding: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-control-text);
  cursor: pointer;
  transition: background var(--transition-panel);
}

/* A share of the tile, so an icon shrinks with the tile that carries it. */
.dock-tile-button svg {
  width: 55%;
  height: 55%;
}

/* Guarded: a tap leaves :hover standing on a touch screen. Stands before the
   open tile's own colour, so an open tile keeps it while hovered. */
@media (hover: hover) {
  .dock-tile:hover .dock-tile-button {
    background: var(--color-control-hover);
  }
}

.dock-tile.is-open .dock-tile-button {
  background: var(--color-surface);
}

/* The name stands where the card will stand, and steps aside once it opens. */
.dock-tile-name {
  position: absolute;
  left: calc(100% + var(--space-m));
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  background: var(--color-surface);
  backdrop-filter: blur(6px);
  color: var(--color-control-text);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-panel);
}

@media (hover: hover) {
  .dock-tile:hover .dock-tile-name {
    opacity: 1;
  }
}

.dock-tile.is-open .dock-tile-name {
  opacity: 0;
}

.dock-card {
  position: absolute;
  left: calc(100% + var(--space-m));
  top: 50%;
  width: 200px;
  max-height: 80vh;
  padding: var(--space-m);
  background: var(--color-surface);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translate(-6px, -50%);
  transition:
    opacity var(--transition-panel),
    transform var(--transition-panel),
    visibility var(--transition-panel);
}

.dock-tile.is-open .dock-card {
  visibility: visible;
  opacity: 1;
  transform: translate(0, -50%);
}

/* For a card holding text rather than controls. */
.dock-card-wide {
  width: 560px;
}

.dock-card-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.dock-card-heading {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

.control-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.control-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* The colour a layer is drawn in; the script supplies it as a custom
   property. */
.control-swatch {
  width: 10px;
  height: 10px;
  background: var(--swatch-color);
}

.layer-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.layer-choices .control-options + .control-options {
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border);
}

/* A note under a control. */
.control-hint {
  display: none;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.6;
}

.control-hint.is-visible {
  display: block;
}

.control-button {
  align-self: flex-start;
  height: var(--control-height);
  padding: 0 12px;
  border: 1px solid var(--color-border);
  background: var(--color-control);
  color: var(--color-control-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

@media (hover: hover) {
  .control-button:hover {
    background: var(--color-control-hover);
  }
}

/* On a narrow screen the dock lies along the foot of the picture and its cards
   open upwards, each over its own tile. A card at the end of the row would hang
   off the screen, so the dock measures how far it has to slide back on. */
@media (max-width: 640px) {
  .dock {
    --dock-card-room: calc(
      100vw -
      2 *
      var(--space-m) -
      env(safe-area-inset-left) -
      env(safe-area-inset-right)
    );
    left: calc(var(--space-m) + env(safe-area-inset-left));
    right: calc(var(--space-m) + env(safe-area-inset-right));
    top: auto;
    bottom: calc(var(--dock-inset) + env(safe-area-inset-bottom));
    /* Nothing to centre vertically any more. */
    transform: none;
    flex-direction: row;
    justify-content: center;
  }

  /* The tiles stay in one row however narrow the screen: each may give up width
     down to nothing rather than wrap or overflow. */
  .dock-tile {
    flex: 0 1 var(--dock-tile);
    min-width: 0;
  }

  .dock-tile + .dock-tile {
    margin-top: 0;
    margin-left: -1px;
  }

  /* Along the foot the row runs unbroken; there is not the width to spare. */
  .dock-tile[data-group="view"] + .dock-tile[data-group="app"] {
    margin-top: 0;
    margin-left: -1px;
  }

  .dock-tile-button {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  /* Nothing hovers on a touch screen. */
  .dock-tile-name {
    display: none;
  }

  /* A closed card is taken out of the layout here rather than merely hidden:
     standing over its own tile it would reach off the screen until the dock has
     measured it, and a browser that once widened its page for that never
     narrows it again. */
  .dock-card {
    display: none;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + var(--space-m));
    max-width: var(--dock-card-room);
    max-height: 60vh;
    transform: translate(calc(-50% + var(--dock-card-shift, 0px)), 6px);
    /* The card takes its place at once instead of sliding into it: a card
       travelling from over its own tile would reach off the screen on the way,
       which is enough to widen the page for good. */
    transition: opacity var(--transition-panel);
  }

  .dock-tile.is-open .dock-card {
    display: flex;
    transform: translate(calc(-50% + var(--dock-card-shift, 0px)), 0);
  }
}