/* The report-an-error control, on every page of the site.
 *
 * ⛔ Its OWN file, not a block inside site-footer.css, because the job boards
 * close their own markup and never load the footer's stylesheet. The renderer
 * in includes/report-error-link.php emits the link to this file itself, once per
 * request, so a page cannot carry the control without its styling.
 *
 * ⚠️ A page may re-skin it (the solved-paper volume sets it in the book's ink
 * and paper) but must never restate these rules: two copies drift.
 */

/* On every page, because an error a reader can see is worth more than one we
   go looking for. Ships from includes/report-error-link.php through the one
   shared footer, so no page can be forgotten and there is one place to edit.

   ⛔ It shipped once as a bare flag icon and the owner looked straight at it and
   asked where the report option was. The WORD does the work; the flag only says
   which kind of word it is.

   ⚠️ z-index deliberately LOW. A bottom anchor ad must be able to cover this,
   never the other way round: obscuring an ad is a policy problem, and a hidden
   report link for the seconds an anchor is up is not. */
.mn-report-flag {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.875rem;   /* 46px, past the 44px a thumb needs */
  padding: 0 0.85rem 0 0.7rem;

  background: #ffffff;
  border: 1px solid #dfe4ec;
  border-radius: 0;
  color: #555555;

  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 10px 24px -16px rgba(15, 23, 42, 0.5);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.mn-report-flag:hover { color: #6b1d1d; border-color: #c9cfda; }
.mn-report-flag:focus-visible { outline: 2px solid #6b1d1d; outline-offset: 2px; }
.mn-report-flag svg { display: block; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }

/* A phone needs the width more than the word does. The flag keeps its thumb
   target and its aria-label either way. */
@media (max-width: 480px) {
  .mn-report-flag { padding: 0; width: 2.875rem; justify-content: center; }
  .mn-report-flag-label { display: none; }
}

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

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