/* =========================================================================
 * Innovate demo attribution banner.
 *
 * THIS FILE IS NOT PART OF THE DEMO APPLICATION. It exists so that a visitor
 * who lands on one of these deliberately convincing demo sites can tell it is a
 * MonarchWorks reference implementation rather than a real product, and has a
 * way through to Innovate.
 *
 * Copying a demo into your own product? Delete all three of these:
 *   1. the `<aside class="mw-attribution">` block in the page markup
 *   2. the link/inline-style that loads this stylesheet
 *   3. the demo's `vendor/attribution-banner/` directory
 * and then delete the three `var(--mw-attribution-height, ...)` offsets in the
 * demo's own stylesheet (search for that name — each one carries a comment).
 * Nothing else in any demo depends on this file.
 *
 * CANONICAL SOURCE: shared/attribution-banner/banner.css
 * Each demo's `vendor/attribution-banner/banner.css` is a generated copy.
 * Edit the canonical file, then run `npm run sync:banner` from the repo root.
 * A contract test fails if a vendored copy has drifted.
 *
 * Self-contained on purpose: system fonts only, no @import, no url(), no
 * external request of any kind, so the banner survives a strict CSP and works
 * with the network unplugged. There is no script and no tracking — the CTA is
 * a plain `<a href>` with no query string.
 * ========================================================================= */

:root {
  /* The nominal height of the bar, for anything ELSE in a demo that pins itself
   * to the top of the viewport (a sticky site header, a skip link, a floating
   * panel). Always read it with a `0px` fallback — that is what leaves a demo
   * correct when the banner is deleted. Keep it in step with the layout below;
   * a value that is too small only misplaces a demo's own chrome by a few
   * pixels, never the page content, because of the sticky positioning above. */
  --mw-attribution-height: 2.5rem;
}

.mw-attribution {
  /* Sticky rather than fixed, and this is deliberate. It is NOT the
   * hide-then-reveal header pattern: the banner is the first element in the
   * document, so it is pinned to the top of the viewport from the first pixel
   * and never scrolls away — behaviourally identical to `fixed`.
   *
   * What sticky buys is exactness. A fixed bar has to be paired with a
   * `body { padding-top: <some number> }` to stop it covering the page, and
   * that number is a guess: the bar is one row on a wide screen and two on a
   * phone, its text wraps differently at every width, and wherever the guess is
   * short the page's own header ends up underneath it. A sticky bar occupies
   * real layout space, so it offsets the page by exactly its own height at
   * every viewport width, with no number to keep in step. */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  /* Above every layer the demos use (sticky headers, chat launchers, skip
   * links) without reaching for the maximum, which would sit above a browser
   * extension's own UI too. */
  z-index: 2147482000;
  box-sizing: border-box;
  min-height: var(--mw-attribution-height);
  margin: 0;
  padding: 0.25rem 1rem;
  display: flex;
  align-items: center;
  background: #0e1521;
  color: #d8e0ee;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  /* rem, not em: the bar must not inherit the host page's font scale, or a
   * demo with a large body font would blow past --mw-attribution-height. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: left;
}

/* A deliberately dark bar in light mode and a lighter one in dark mode, so it
 * reads as a frame around the demo in both — never as the demo's own chrome. */
@media (prefers-color-scheme: dark) {
  .mw-attribution {
    background: #1c2637;
    color: #dde4f1;
    border-bottom-color: rgba(255, 255, 255, 0.22);
  }
}

.mw-attribution *,
.mw-attribution *::before,
.mw-attribution *::after {
  box-sizing: border-box;
}

.mw-attribution__inner {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem 0.875rem;
}

.mw-attribution__text {
  margin: 0;
  min-width: 0;
}

.mw-attribution__badge {
  display: inline-block;
  margin-inline-end: 0.5rem;
  padding: 0.0625rem 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.25rem;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.05em;
}

/* A real anchor, styled as a button. Never a JS click handler: the attribution
 * and its call to action have to work with scripting disabled. */
.mw-attribution__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 1.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #ffffff;
  color: #0e1521;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s ease;
}

.mw-attribution__cta:hover {
  background: #e7edfb;
  color: #0e1521;
  text-decoration: none;
}

/* The white pill would swallow a white outline, so the ring is offset out onto
 * the dark bar where it is unmissable in both colour schemes. */
.mw-attribution__cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.mw-attribution__glyph {
  font-size: 0.9375rem;
  line-height: 1;
}

/* Below this width the sentence and the pill no longer share a line, so the bar
 * becomes two rows. The heights here were measured in a browser across the
 * common viewport widths rather than guessed: down to about 510px the sentence
 * still fits on one line, and below that it takes two. */
@media (max-width: 760px) {
  :root {
    --mw-attribution-height: 4.5rem;
  }

  .mw-attribution {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }

  .mw-attribution__inner {
    flex-direction: column;
    gap: 0.375rem;
    text-align: center;
  }

  /* Bigger tap target on touch widths, where this is the only thing on its row. */
  .mw-attribution__cta {
    min-height: 2rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
  }
}

/* Phone widths: the sentence wraps to two lines. */
@media (max-width: 560px) {
  :root {
    --mw-attribution-height: 5.5rem;
  }
}

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

@media (forced-colors: active) {
  .mw-attribution {
    border-bottom: 1px solid CanvasText;
  }

  .mw-attribution__badge,
  .mw-attribution__cta {
    border: 1px solid CanvasText;
  }
}

/* On paper the banner is a normal first paragraph, not a stripe across the top
 * of every printed page. */
@media print {
  .mw-attribution {
    position: static;
  }
}