/* Screen-only fit and control layout for generated pack previews.
   The worksheet is scaled after pagination, never reflowed. */

@media screen {
  .rl-pack-screen-frame.is-scaled {
    position: relative;
    width: 100%;
    height: var(--rl-pack-screen-height);
  }

  .rl-pack-screen-frame.is-scaled > #stage.rl-pack-screen-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--rl-pack-screen-width);
    transform: scale(var(--rl-pack-screen-scale));
    transform-origin: top left;
  }

  .rl-pack-screen-controls {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: max-content;
    max-width: 230px;
    font-family: 'Nunito','Segoe UI',system-ui,sans-serif;
  }

  .rl-pack-screen-controls > .rl-tools,
  .rl-pack-screen-controls > .rl-self-check-launch {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
  }

  .rl-pack-screen-controls > .rl-tools {
    align-items: stretch;
  }

  .rl-pack-screen-controls > .rl-self-check-launch {
    display: block;
    text-align: center;
  }
}

/* 830px is the sheet's own natural width (210mm plus the stage's 18px
   gutters) and therefore the exact width below which pack-screen.js starts
   scaling. Tying the control layout to the same number means one rule:
   while the sheet fits, the controls float over the margin beside it; once
   the sheet is being shrunk to fit, the screen is too narrow to spare 230px
   of it, so they sit above the worksheet instead of on top of question 1. */
@media screen and (max-width: 830px) {
  .rl-pack-screen-controls {
    position: static;
    width: calc(100% - 24px);
    max-width: 230px;
    margin: 12px 12px 12px auto;
  }
}

@media print {
  .rl-pack-screen-frame {
    display: contents !important;
  }

  #stage.rl-pack-screen-stage {
    position: static !important;
    width: auto !important;
    transform: none !important;
  }

  .rl-pack-screen-controls {
    display: none !important;
  }
}