/* The portal's own parts, on the pv- prefix. Colours and steps come from the kit's tokens; the kit owns the rest. */
html,
body {
  height: 100%;
  margin: 0;
  background: var(--ui-ink);
}

/* The page body is at most 1520 px wide, centred. The top bar's rule still runs the full width, but the wordmark,
   the families and the account line up with the body's edges: with the content's gutter on both sides, the body's
   left edge is half of what the window has beyond 1520 px. A phone keeps the kit's own narrower padding. */
.ui-page-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
}
@container (min-width: 601px) {
  .ui-application-logo,
  .ui-application-header {
    padding-inline: max(var(--ui-gutter), calc((100% - 1520px) / 2));
  }
}

/* The bench: the controls in a column on the left, the picture filling the rest and staying in view while the
   controls scroll. */
.pv-bench {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--ui-gutter);
  align-items: start;
}
.pv-controls {
  display: grid;
  gap: var(--ui-space-4);
  min-width: 0;
}
.pv-viewer {
  position: sticky;
  top: var(--ui-space-3);
  min-width: 0;
}
/* The picture is as large as its column allows, but never taller than the screen below the product's title, so on a
   wide screen the whole board stays in view instead of running off the bottom. */
.pv-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  width: min(100%, calc((100dvh - 300px) * 1.25));
  min-width: min(100%, 480px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ui-well);
}
.pv-stage[data-bg='light'] {
  background: #ffffff;
}
.pv-stage[data-bg='checker'] {
  background: repeating-conic-gradient(#8f8c86 0 25%, #c9c6bf 0 50%) 0 0 / 24px 24px;
}
.pv-stage > img {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: contain;
}

.pv-actions {
  margin-top: var(--ui-gutter);
}

/* The angles: one pressable per angle, its picture over its name, two to a row in the controls column. */
.pv-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-2);
}
.pv-cell {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--ui-space-1);
  align-self: stretch;
  justify-self: stretch;
}
.pv-strip-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: contain;
}
.pv-strip-name {
  font-size: var(--ui-type-small-size);
  line-height: 1.3;
}

/* The 3D files in the controls column: per board its name (the kit's control label) over its buttons. */
.pv-board-files {
  display: grid;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
}

/* The download step. */
.pv-terms {
  display: grid;
  gap: var(--ui-space-3);
  padding-top: var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
}
.pv-terms-text {
  min-height: 120px;
  display: grid;
}

.pv-signin-form {
  display: grid;
  gap: var(--ui-space-3);
  width: min(360px, 100%);
  text-align: left;
}

/* On a phone the bench is one column, the picture first; the angles are one row that scrolls sideways. */
@media (max-width: 760px) {
  .pv-bench {
    grid-template-columns: minmax(0, 1fr);
  }
  .pv-viewer {
    position: static;
  }
  .pv-stage {
    width: 100%;
  }
  .pv-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 112px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--ui-space-2);
  }
  .pv-strip > * {
    scroll-snap-align: start;
  }
}