/* Shared by the authenticated and public Viewer. No inventory page rules. */
.viewer-drawer-shell {
  --viewer-browse-width: minmax(280px, 22vw);
  --viewer-detail-width: minmax(0, .773fr);
  position: relative;
  flex: 1;
  height: 0;
  min-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  grid-template-columns: var(--viewer-browse-width) minmax(0, 1fr) var(--viewer-detail-width);
  transition: grid-template-columns 240ms ease;
}
.viewer-drawer-shell.details-collapsed {
  grid-template-columns: var(--viewer-browse-width) minmax(0, 1fr) minmax(0, 0fr);
}
.viewer-drawer-shell > .browse-pane { grid-column: 1; grid-row: 1; overflow: hidden; }
.viewer-drawer-shell > .map-pane { grid-column: 2; grid-row: 1; overflow: hidden; }
.viewer-drawer-shell > .detail-pane {
  grid-column: 3;
  grid-row: 1;
  overflow: hidden;
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform 240ms ease, opacity 180ms ease, visibility 0s;
}
.viewer-drawer-shell.details-collapsed > .detail-pane {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 240ms ease, opacity 180ms ease, visibility 0s linear 240ms;
  border-left-width: 0;
}
.viewer-drawer-shell > .detail-pane > .pane-header { position: relative; }
.viewer-detail-minimise { display: none !important; }
.viewer-detail-edge-toggle {
  position: absolute;
  grid-column: 3;
  grid-row: 1;
  left: -14px;
  top: calc(50% - 29px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 58px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--accent);
  cursor: pointer;
  transition: left 240ms ease;
}
.viewer-detail-edge-toggle[hidden] { display: none !important; }
.viewer-detail-edge-toggle:hover { background: var(--accent-soft); }
.viewer-detail-edge-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.viewer-detail-edge-toggle svg { display: block; transition: transform 180ms ease; }
.details-collapsed > .viewer-detail-edge-toggle { left: -28px; }
.details-collapsed > .viewer-detail-edge-toggle svg { transform: rotate(180deg); }
.viewer-drawer-shell .pane-body { flex: 1; overscroll-behavior: contain; }
.viewer-drawer-shell .map-pane-body { padding-bottom: 0; }
@media (max-width: 1200px) {
  .viewer-drawer-shell { --viewer-browse-width: 280px; --viewer-detail-width: minmax(0, .9fr); }
}
@media (max-width: 1000px) {
  .viewer-drawer-shell, .viewer-drawer-shell.details-collapsed {
    --viewer-browse-width: minmax(200px, 30vw);
    grid-template-columns: var(--viewer-browse-width) minmax(0, 1fr) 0;
  }
  .viewer-drawer-shell > .viewer-detail-edge-toggle { left: calc(0px - min(90vw, 480px) - 14px); }
  .viewer-drawer-shell.details-collapsed > .viewer-detail-edge-toggle { left: -28px; }
  .viewer-drawer-shell > .detail-pane {
    position: absolute; top: 0; bottom: 0; right: 0;
    width: min(90vw, 480px); box-shadow: -8px 0 24px rgba(31,42,48,.14);
  }
}
@media (max-width: 600px) {
  .viewer-drawer-shell, .viewer-drawer-shell.details-collapsed { --viewer-browse-width: minmax(160px, 40vw); }
  .viewer-drawer-shell .browse-pane > .pane-body { padding: .65rem; }
  .viewer-drawer-shell .map-pane > .pane-header { padding: .65rem; flex-wrap: wrap; gap: .5rem; }
  .viewer-drawer-shell .map-pane > .pane-header p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer-drawer-shell, .viewer-drawer-shell > .detail-pane, .viewer-detail-edge-toggle, .viewer-detail-edge-toggle svg { transition: none; }
}