/* Drydock — side-rail q400: tools | paw | tray (3-column grid) */

.dd-viewport:not(.dd-layout--phone-stack) #q400 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dd-paw) minmax(0, 1fr);
  align-items: center;
}

.dd-viewport:not(.dd-layout--phone-stack) #q400 .dd-q400-inner {
  display: contents;
}

.dd-viewport:not(.dd-layout--phone-stack) #q400 .dd-q400-wing--left {
  grid-column: 1;
  overflow-x: auto;
  justify-content: space-between;
  gap: 0;
  padding: 0 var(--dd-paw-gap) 0 var(--dd-edge-gap);
}

.dd-viewport:not(.dd-layout--phone-stack) #q400 .dd-q400-wing--right {
  grid-column: 3;
  overflow-x: auto;
  justify-content: flex-start;
  padding: 0 var(--dd-edge-gap) 0 var(--dd-paw-gap);
}

/* Desktop + tablet landscape — cluster tools at paw (side-rail layout) */
body[data-dd-token="desktop"] .dd-viewport:not(.dd-layout--phone-stack) #q400 .dd-q400-wing--left,
body[data-dd-token="tablet-landscape"] .dd-viewport:not(.dd-layout--phone-stack) #q400 .dd-q400-wing--left {
  justify-content: flex-end;
  gap: var(--dd-paw-gap);
}

body[data-dd-token="desktop"] .dd-viewport:not(.dd-layout--phone-stack) #q400 .dd-q400-wing--right,
body[data-dd-token="tablet-landscape"] .dd-viewport:not(.dd-layout--phone-stack) #q400 .dd-q400-wing--right {
  justify-content: flex-start;
}

.dd-viewport:not(.dd-layout--phone-stack) #q400 .dd-paw-wrap {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  justify-self: center;
  align-self: center;
  width: var(--dd-paw);
  height: var(--dd-paw);
}