/*
 * KiwiBee change 5 (see SOURCE.md): the selection + "Separate structures" dock
 * sits in the right-hand column, under the Anatomy notes panel, instead of
 * floating over the middle of the 3D view. Phones (below 861px) keep the
 * upstream bottom bar. Loaded after the upstream stylesheet, so selectors of
 * equal or higher specificity below win.
 */
@media (width >= 861px) {
  :root {
    --kb-dock-right: 112px;
    --kb-dock-width: 330px;
    --kb-dock-bottom: 54px;
    --kb-dock-height: 172px;
    --kb-dock-gap: 10px;
    --kb-sidebar-right: 294px;
    --kb-free-left: calc(100vw - var(--kb-dock-right) - var(--kb-dock-width));
  }

  body .studio .stage-bottom,
  body.details-open .studio .stage-bottom,
  body:not(.details-open) .studio .stage-bottom {
    inset: auto var(--kb-dock-right) var(--kb-dock-bottom) auto;
    width: var(--kb-dock-width);
    transform: none;
  }

  /* Upstream hides the dock while the notes are open, because it used to
     share the middle of the view with them. In the right column it fits. */
  body.details-open:not(.teaching):not(.dental-stage):not(.tooth-inspection):not(.source-models)
    .studio
    .stage-bottom {
    display: flex;
  }

  /* The notes panel stops above the dock. */
  body.details-open:not(.teaching):not(.dental-stage):not(.tooth-inspection):not(.source-models)
    .studio
    .inspector {
    bottom: calc(var(--kb-dock-bottom) + var(--kb-dock-height) + var(--kb-dock-gap));
    max-height: none;
  }

  /* With the dock gone from the centre, the view caption drops to the floor,
     centred in the space between the library and the right column. */
  body .studio .caption-stack,
  body.details-open .studio .caption-stack,
  body:not(.details-open) .studio .caption-stack {
    bottom: var(--kb-dock-bottom);
    left: calc((var(--kb-sidebar-right) + var(--kb-free-left)) / 2);
    width: min(520px, var(--kb-free-left) - var(--kb-sidebar-right) - 24px);
    transform: translate(-50%);
  }
}

@media (861px <= width <= 1240px) {
  :root {
    --kb-dock-width: 296px;
    --kb-dock-height: 184px;
    --kb-sidebar-right: 270px;
  }
}
