/* The "back to the top" control, on every page that shows a PDF in the reader.
 *
 * ⛔ Its OWN file, emitted by includes/back-to-top.php with the button itself,
 * once per request. Same rule the report flag follows: a page cannot carry the
 * control without its styling, so a viewer that closes its own markup and never
 * loads a page stylesheet still gets a painted button.
 *
 * ⚠️ The solved-paper volume (assets/css/qp-solution-page.css, .qps-totop) has
 * its own button in the book's square paper register and does NOT use this file.
 * That one came first and is skinned into tokens declared inside .qps-page. If
 * you change the BEHAVIOUR here, look there too.
 */

/* A white box with a hairline round it, sized to a thumb. It matches the report
   flag it stacks with, deliberately: the two controls share the corner and a
   square button beside a 6px-rounded one reads as a mistake, not as a decision.
   ⛔ Not a filled or coloured pill. It floats over whatever the page put under
   it, and beside a bottom anchor ad a filled control reads as ad furniture.

   ⚠️ z-index 40 sits under the shell's modal overlay (1000) and its toast
   (9000+), so neither can be covered, and under a bottom anchor ad, which the
   script lifts the button clear of instead. */
.mn-totop {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + var(--mn-totop-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 40;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.875rem;      /* 46px, past the 44px a thumb needs */
  height: 2.875rem;
  padding: 0;

  background: #ffffff;
  border: 1px solid #dfe4ec;
  border-radius: 6px;
  color: #555555;
  cursor: pointer;

  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 10px 24px -16px rgba(15, 23, 42, 0.5);

  /* Out of the way until the script has decided the reader is far enough down.
     ⛔ [hidden] as well, so a reader with JS off never meets a dead control. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s, color 0.18s ease, border-color 0.18s ease;
}
.mn-totop[hidden] { display: none; }
.mn-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mn-totop:hover { color: #6b1d1d; border-color: #c9cfda; }
.mn-totop:focus-visible { outline: 2px solid #6b1d1d; outline-offset: 2px; }
.mn-totop svg { display: block; width: 1.3rem; height: 1.3rem; }

/* The report flag rides up one button height, because this sheet only loads on
   pages that carry the button and the two of them share the corner.
   ⛔ `body` is in the selector on purpose. report-flag.css is emitted by its own
   renderer and may load AFTER this file, so equal specificity would lose the
   cascade on ordering alone. It also keeps a page's own re-skin of the flag
   (.qps-page .qps-flag, 0-2-0) ahead of this rule, which is correct: a page that
   has already placed its flag knows better than this file does.
   ⚠️ Both controls keep right: 1.25rem at every width so the stack stays a
   column. Do not tuck one of them closer to the edge on a phone. */
body .mn-report-flag {
  bottom: calc(1.25rem + 2.875rem + 0.5rem + var(--mn-totop-lift, 0px) + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .mn-totop { transition: none; }
}

@media print {
  .mn-totop { display: none; }
}