/* The cookie bar — the consent UI for every site we run.
 *
 * OWNED BY THE HUB, and injected like brand.css: copied into each child clone
 * at build time and listed in the generated config's extra_css. A tracked copy
 * in a child repo is drift. m7kni.com, brewmdm.app and portieapp.app are NOT
 * children of that build, so they vendor these bytes. Their copies are
 * BYTE-IDENTICAL on purpose, so keeping them in step is a diff and not a
 * reading exercise:
 *
 *   diff shared/stylesheets/consent-bar.css \
 *        ../m7kni-com-site/docs/stylesheets/consent-bar.css
 *
 * Change it here first, then copy outward.
 *
 * SEPARATE FROM brand.css ON PURPOSE. brand.css unifies colour and type across
 * Material's own markup and then stops — that restraint is the design system's
 * instruction, not our caution. This is a component, and the split brand.css
 * itself describes is brand there, components here.
 *
 * ── WHY A BAR AND NOT ZARAZ'S OWN MODAL ──────────────────────────────────
 * Zaraz ships a consent dialog and opens it with dialog.showModal(), so the
 * page behind it is genuinely INERT, not merely dimmed — it covered the page
 * and stopped the site being read at all until it was answered. Restyling that
 * dialog down to the bottom of the viewport was considered and REJECTED: it
 * would have looked dismissible while still blocking everything. So
 * consent.hideModal is true on the zone and this bar is the UI instead. It is
 * a region, not a dialog: it blocks nothing and traps no focus.
 *
 * Zaraz's shadow-root stylesheet (shared/zaraz/consent-modal.css) is therefore
 * dead on any zone that has moved to this bar. Do not style both and assume
 * one of them is what visitors see — check the zone's hideModal.
 *
 * ── THE VARIABLE CHAIN ───────────────────────────────────────────────────
 * Every colour, radius and face runs a two-tier var() chain so these exact
 * bytes render as each site's own palette:
 *
 *   1. --color-* / --radius-* / --font-sans — the m7kni design system's
 *      tokens, which m7kni.com, brewmdm.app and portieapp.app define.
 *   2. --md-* — Material's own properties, the fallback for m7kni.io and its
 *      child docs sites, whose brand.css deliberately expresses the design
 *      system ONLY as --md-*.
 *   3. A literal, so an undefined variable degrades to the light m7kni palette
 *      rather than to unstyled.
 *
 * Collapse the chain to one tier and one side of that split silently renders
 * fixed light-mode literals — correct-looking in light, wrong in dark.
 */

.m7-cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above Material's header (z-index 2) and its back-to-top button (1), below
     nothing that matters. Material's own consent overlay is not in play. */
  z-index: 60;
  font-family: var(--font-sans, var(--md-text-font, "Geist", ui-sans-serif, system-ui, sans-serif));
  background: var(--color-surface, var(--md-default-bg-color, #ffffff));
  border-top: 1px solid var(--color-border, var(--md-typeset-table-color, #e6e2db));
  box-shadow: 0 -8px 24px -12px rgb(16 24 40 / 0.12);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.m7-cookiebar.is-open {
  transform: translateY(0);
}

.m7-cookiebar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 61rem;
  margin: 0 auto;
  padding: 1rem 1.2rem;
}

.m7-cookiebar__text {
  margin: 0;
  max-width: 68ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-ink-light, var(--md-default-fg-color--light, #3c4657));
}

.m7-cookiebar__text a {
  color: var(--color-accent, var(--md-primary-fg-color, #00764d));
  text-underline-offset: 2px;
}

.m7-cookiebar__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.m7-cookiebar__btn {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  height: 38px;
  padding: 0 18px;
  margin: 0;
  cursor: pointer;
  border-radius: var(--radius-control, 0.5rem);
  transition:
    background-color 150ms,
    color 150ms,
    border-color 150ms;
}

.m7-cookiebar__btn--accept {
  background-color: var(--color-accent, var(--md-primary-fg-color, #00764d));
  /* The label is the BAR'S OWN BACKGROUND, not a fixed white. The accent flips
     LIGHT in dark mode (m7kni.io #00764d -> #3eaf86; the design system's oklch
     L 0.49 -> 0.68), so white-on-accent measures 2.72:1 in dark — a real AA
     failure, and the exact bug this pattern shipped with in the Zaraz modal.
     Surface moves in step with the accent, so the pair reads in both schemes:
     5.66-5.68:1 light, 6.55-6.58:1 dark. Re-measure if the accent changes. */
  color: var(--color-surface, var(--md-default-bg-color, #ffffff));
  border: 1px solid var(--color-accent, var(--md-primary-fg-color, #00764d));
}

.m7-cookiebar__btn--accept:hover {
  background-color: var(--color-accent-hover, var(--md-accent-fg-color, #00593a));
  border-color: var(--color-accent-hover, var(--md-accent-fg-color, #00593a));
}

.m7-cookiebar__btn--reject {
  background-color: transparent;
  color: var(--color-accent, var(--md-primary-fg-color, #00764d));
  border: 1px solid var(--color-border-hover, var(--md-typeset-table-color, #c8c2b9));
}

/* The tint has to flip with the scheme or it is a white flash on a dark page,
   so tier 2 is Material's code surface — not accent-tinted, but the nearest
   thing a docs site defines that tracks its own toggle. */
.m7-cookiebar__btn--reject:hover {
  background-color: var(--color-accent-subtle, var(--md-code-bg-color, #f4faf7));
  border-color: var(--color-accent, var(--md-primary-fg-color, #00764d));
}

.m7-cookiebar :focus-visible {
  outline: 2px solid var(--color-accent, var(--md-primary-fg-color, #00764d));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 0.25rem);
}

/* Stacked on narrow screens, and the buttons go FULL WIDTH so neither is the
   easier target. Refusing has to be as easy as agreeing; that is the
   compliance point, not a taste one. Do not make Reject the smaller one. */
@media (max-width: 640px) {
  .m7-cookiebar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
  }
  .m7-cookiebar__actions > .m7-cookiebar__btn {
    flex: 1;
  }
}

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

/* The only route back to the choice once the bar has been answered, so it sits
   in the footer on every page. The privacy policy points at it by name. */
.m7-cookiebar-manage {
  font: inherit;
  font-size: 0.7rem;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 0.6rem;
  cursor: pointer;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.m7-cookiebar-manage:hover {
  opacity: 1;
}