@charset "UTF-8";

/*======================================================================*
 * <mxw-back-to-top> — the mxw-back-to-top.js control's own styles.
 *
 * Loaded by the page (`<m:style href="/moxow/components/mxw-back-to-top.css"/>`),
 * or injected as a <link> by mxw-back-to-top.js when a page has not
 * declared it, so dropping in the script alone still works.
 *
 * In @layer mxw.back-to-top, under `theme` and `site` in the order
 * m:head-layers declares, so a page restyles it by saying anything at
 * all. Knobs:
 *
 *   --mxw-back-to-top-ink       glyph colour       (default #f2f2f2)
 *   --mxw-back-to-top-surface   disc fill          (default rgb(26 26 26 / .85))
 *   --mxw-back-to-top-inset     distance from the corner  (default 1rem)
 *
 * The defaults are measured for a light page: the fill composites to
 * ~#3c3c3c over white, 9.8:1 under the glyph and 8.4:1 against the
 * page — both past the 4.5:1 text and 3:1 boundary floors. (The old
 * .mxw-go-to-top was #888 on #333 at opacity .7: ~2.2:1 composited.)
 * On a dark page the hairline border is what keeps an edge. The
 * translucency lives in the FILL's alpha, never in `opacity` on the
 * control: opacity dims the glyph with the disc.
 *======================================================================*/

@layer mxw.back-to-top {
  mxw-back-to-top {
    /* Sticky, not fixed, for two reasons that turn out to be one.
       The element stands at the end of the page column (#mxw-page), and
       the column is a query container — container-type makes it the
       containing block for fixed descendants, so "fixed" insets stopped
       meaning the viewport the moment the element moved inside it.
       Sticky positions against the scrollport wherever it lives, and it
       is constrained to its container by definition: the disc rides the
       bottom of the view but never leaves the column's inline edges,
       and at the end of the page it settles into its flow spot. */
    position: sticky;
    inset-block-end: var(--mxw-back-to-top-inset, 1rem);
    /* above the page, below the modal furniture (.m-mask 500 wants the
       page dimmed, and that includes this) */
    z-index: 450;
    display: block;
    inline-size: fit-content;
    margin-inline-start: auto;
    margin-inline-end: var(--mxw-back-to-top-inset, 1rem);
  }

  /* what the IntersectionObserver watches: 1px at the document top */
  .mxw-back-to-top-sentinel {
    position: absolute;
    inset-block-start: 0;
    inline-size: 1px;
    block-size: 1px;
    visibility: hidden;
    pointer-events: none;
  }

  mxw-back-to-top .mxw-back-to-top-link {
    place-items: center;
    inline-size: 2.75rem;         /* the touch floor, everywhere: this
                                     control is primarily for phones */
    aspect-ratio: 1;
    color: var(--mxw-back-to-top-ink, #f2f2f2);
    background: var(--mxw-back-to-top-surface, rgb(26 26 26 / 0.85));
    border: 1px solid rgb(255 255 255 / 0.3);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);

    /* hidden with display, not visibility: an invisible box is still a
       tab stop and still counts toward the scrollable area. The fade
       survives through allow-discrete + @starting-style. */
    display: none;
    opacity: 0;
    translate: 0 0.5rem;
    transition: opacity 0.2s ease-out, translate 0.2s ease-out,
                display 0.2s allow-discrete;

    & svg { inline-size: 1.1rem; block-size: auto; }

    &:hover { filter: brightness(1.4); }

    /* Two-tone ring, because the backdrop is whatever the page put in
       its corner: the white inner ring shows on a dark page, the dark
       outline on a light one. outline survives forced-colors. */
    &:focus-visible {
      outline: 2px solid #1a1a1a;
      outline-offset: 2px;
      box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(0 0 0 / 0.35);
    }
  }

  mxw-back-to-top.is-shown .mxw-back-to-top-link {
    display: grid;
    opacity: 1;
    translate: 0 0;

    @starting-style { opacity: 0; translate: 0 0.5rem; }
  }

  /* Heard but not seen: the accessible name. */
  mxw-back-to-top .mxw-back-to-top-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The trip back is native anchor navigation; whether it is smooth is
     decided here, where it can be gated. A site that says otherwise in
     its own layer wins. */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  @media (prefers-reduced-motion: reduce) {
    mxw-back-to-top .mxw-back-to-top-link { transition: none; translate: none; }
  }

  @media (forced-colors: active) {
    mxw-back-to-top .mxw-back-to-top-link {
      background: ButtonFace;
      border-color: ButtonText;
    }
  }

  /* It must never appear on a printed sheet. */
  @media print {
    mxw-back-to-top { display: none; }
  }
}