@charset "UTF-8";

/*======================================================================*
 * <mxw-print> — the print-mode chooser's own styles.
 *
 * Loaded by the page (`<m:style href="/moxow/components/mxw-print.css"/>`),
 * or injected by mxw-print.js when a page has not declared it.
 *
 * In @layer mxw.print, under `theme` and `site` in the order
 * m:head-layers declares, so a page restyles it by saying anything at
 * all.
 *
 * The declaration is the load-bearing part, not the layer. Unlayered,
 * this sheet would beat everything a page could say back — but so would
 * a layer nobody has named, since an unknown name is appended AFTER the
 * declared ones. When mxw-print.js injects this on a page that declares
 * no order, `mxw` lands last and these defaults win. Declare the order.
 *======================================================================*/

@layer mxw.print {
  /* Centred above the sheet. The pair stays a pair — whatever the
     alignment, they are two halves of one choice and must not be spread
     apart, which is why this is justify-content on a gap-joined row and
     not space-between or space-around.

     Empty until the script builds it, so a reader without javascript
     sees nothing at all rather than a dead control. */
  mxw-print {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs, 0.5rem);
    margin-block-end: var(--space-s, 0.75rem);
  }

  mxw-print:empty { display: none; }

  mxw-print .mxw-print-btn {
    /* --target is the site's interactive minimum; a print button is a
       control, so it takes the full one rather than the text floor. */
    min-block-size: var(--target, 1.75rem);
    padding-block: 0.3em;
    padding-inline: 0.9em;
    font-family: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.8125rem;
    color: var(--color-meta, #6a6a6a);
    background: #fff;
    border: 1px solid var(--rule-strong, #8a8a8a);
    border-radius: 3px;
    cursor: pointer;

    &:hover {
      color: var(--color-hover-ink, #500000);
      background: var(--color-hover-surface, #f2d015);
      border-color: var(--color-hover-ink, #500000);
    }

    /* The focus ring is the keyboard's only feedback here, so it is not
       left to the UA default on a bordered control. */
    &:focus-visible {
      outline: 2px solid var(--color-accent, #b45309);
      outline-offset: 2px;
    }

    &:disabled {
      cursor: progress;
      opacity: 0.6;
    }
  }

  /* The colour one is the deliberate choice, so it says so in ink rather
     than by being bigger. */
  mxw-print .mxw-print-colour { color: var(--color-accent, #b45309); }

  @media (pointer: coarse) {
    mxw-print .mxw-print-btn { min-block-size: 2.75rem; }
  }

  /* It must never appear on the sheet it prints. */
  @media print {
    mxw-print { display: none; }
  }
}