/* Floating bottom toolbar: View ▾, Fit, Explode ▾ | Edit, Share | fps | ⋯ (dock.js). The three
   menus open a popover above their button; on phones the buttons are icons, the popovers sit
   above the toolbar's centre and the fps buttons move into ⋯. */
.sv-dock {
  position: absolute;
  z-index: 5; /* its popovers over the drawer and card */
  bottom: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 48px;
  padding: 6px;
  border: 1px solid var(--sv-border);
  border-radius: 12px;
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
  transform: translateX(-50%);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.sv-dock__sep {
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--sv-border);
}

#viewer .sv-dock button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: transparent;
  background: transparent;
}

#viewer .sv-dock button:hover:not(:disabled) {
  background: var(--sv-hover);
}

#viewer .sv-dock button[aria-pressed="true"],
#viewer .sv-dock__toggle[aria-expanded="true"] {
  background: var(--sv-hover);
  color: var(--sv-ink);
}

.sv-fps [aria-pressed="true"] {
  font-weight: 650;
}

/* Edit on, parts exploded: accent. */
#viewer .sv-dock [data-action="edit"][aria-pressed="true"],
#viewer .sv-dock .sv-dock__explode.is-on {
  color: var(--sv-accent);
  background: var(--sv-accent-soft);
}

/* Explode while editing: unavailable, but it keeps its tooltip saying why. */
#viewer .sv-dock button[aria-disabled="true"] {
  color: var(--sv-faint);
  background: transparent;
  opacity: 0.6;
  cursor: default;
}

.sv-dock__icon {
  flex: none;
}

.sv-dock__caret {
  width: 6px;
  height: 6px;
  margin: 0 2px 3px 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.sv-fps {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sv-fps__label {
  padding: 0 4px 0 2px;
  color: var(--sv-muted);
  font-weight: 550;
}

/* ---- Popovers ---------------------------------------------------------------------------------- */
.sv-dock__menu {
  position: relative;
}

.sv-dock__pop {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  display: none;
  align-items: center;
  gap: 2px;
  width: max-content;
  padding: 5px;
  border: 1px solid var(--sv-border);
  border-radius: 12px;
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
  transform: translateX(-50%);
}

.sv-dock__toggle[aria-expanded="true"] + .sv-dock__pop {
  display: flex;
}

.sv-dock__menu--end .sv-dock__pop {
  right: -6px;
  left: auto;
  transform: none;
}

/* ⋯: photo, shortcuts, open a file, load from a link, demos (on phones the fps buttons first);
   every row left-aligned. */
.sv-dock__more {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 300px;
}

#viewer .sv-dock__more > button {
  justify-content: flex-start;
}

.sv-dock__key {
  margin-left: auto;
  color: var(--sv-faint);
}

.sv-dock__more .sv-demos__title {
  margin: 4px 0 0;
}

.sv-dock__more .sv-demos {
  justify-content: flex-start;
}

/* Touch has no keyboard shortcuts to show. */
@media (pointer: coarse) {
  #viewer .sv-dock .sv-dock__shortcuts {
    display: none;
  }
}

.sv-explode-control {
  gap: 10px;
  padding: 5px 12px;
}

.sv-explode-control output {
  width: 80px;
  color: var(--sv-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#viewer .sv-explode-range {
  width: 160px;
  height: 24px;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

#viewer .sv-explode-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--sv-border-strong);
}

#viewer .sv-explode-range::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--sv-border-strong);
}

#viewer .sv-explode-range::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--sv-accent);
}

#viewer .sv-explode-range::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border: 2px solid var(--sv-accent);
  border-radius: 50%;
  background: var(--sv-surface);
  appearance: none;
}

#viewer .sv-explode-range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid var(--sv-accent);
  border-radius: 50%;
  background: var(--sv-surface);
}

.sv-url {
  display: flex;
  gap: 4px;
  margin: 0;
}

#viewer .sv-url input {
  flex: 1;
  width: 11em;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--sv-border-strong);
  border-radius: 8px;
  background: var(--sv-surface);
}

#viewer .sv-url button {
  border-color: var(--sv-border-strong);
}

@media (pointer: coarse) {
  #viewer .sv-url input {
    height: 40px;
  }

  #viewer .sv-explode-range {
    height: 40px;
  }

  #viewer .sv-explode-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -10.5px;
  }

  #viewer .sv-explode-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}

/* Narrow windows and phones: short labels under the icons. */
@media (max-width: 900px), (max-width: 1023px) and (max-height: 520px) and (min-aspect-ratio: 301/200) {
  /* `.sv-dock .sv-dock__toggle` outranks `#viewer .sv-dock button`'s 6px gap, so the toggles'
     labels sit on the plain buttons' baseline. */
  #viewer .sv-dock > button,
  #viewer .sv-dock .sv-dock__toggle {
    flex-direction: column;
    gap: 1px;
    height: 100%;
  }

  .sv-dock__label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
  }

  .sv-dock__caret {
    display: none;
  }

  /* 44px wide targets. */
  #viewer .sv-dock > button,
  #viewer .sv-dock__toggle {
    min-width: 44px;
    padding: 0 4px;
  }
}

/* Phones (the card's sheet query): one compact row of icons clear of the home indicator. */
@media (max-width: 760px), (max-width: 1023px) and (max-height: 520px) and (min-aspect-ratio: 301/200) {
  .sv-dock {
    bottom: max(12px, env(safe-area-inset-bottom));
    height: 52px;
    padding: 5px;
  }

  .sv-dock__sep {
    display: none;
  }

  /* The popovers sit above the toolbar's centre, as wide as the screen allows. */
  .sv-dock__menu {
    position: static;
  }

  .sv-dock__pop,
  .sv-dock__menu--end .sv-dock__pop {
    bottom: calc(100% + 8px);
    right: auto;
    left: 50%;
    max-width: calc(100vw - 24px);
    transform: translateX(-50%);
  }

  .sv-dock__more {
    width: min(360px, calc(100vw - 24px));
  }

  .sv-dock__more .sv-fps button {
    flex: 1;
    min-width: 0;
  }

  .sv-explode-control {
    width: min(360px, calc(100vw - 24px));
  }

  #viewer .sv-explode-range {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

/* Narrow phones (≤ 600 px): the toolbar holds View, Look, Measure, Shots, Edit, Share and ⋯ (7
   icons of 44 px fit a 360 px phone); Fit and Explode move into ⋯ ("Explode…" opens the same
   slider, dock.js). A control that leaves the toolbar here gets `sv-dock__phone-hide` (its menu
   then lays out as if absent, its popover still opening above the toolbar) and its ⋯ item
   `sv-dock__phone-only`. */
#viewer .sv-dock .sv-dock__phone-only {
  display: none;
}

@media (max-width: 600px) {
  #viewer .sv-dock .sv-dock__phone-hide {
    display: none;
  }

  #viewer .sv-dock .sv-dock__phone-only {
    display: flex;
    justify-content: flex-start;
  }

  .sv-dock__menu:has(> .sv-dock__phone-hide) {
    display: contents;
  }
}