/* The consent bar and the footer's "Cookie settings" (consent.js), on the site pages (site.css tokens) and the legal pages
   (their own inline tokens: --card instead of --surface). A bottom bar, never a modal; both choices look the same. */
.mp-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px 20px;
    flex-wrap: wrap; justify-content: center; padding: 12px 16px; background: var(--surface, var(--card, #ffffff));
    color: var(--text, #172033); border-top: 1px solid var(--line, #dfe3ea); box-shadow: 0 -6px 20px rgba(16, 37, 66, .12);
    font-size: .9rem; line-height: 1.45; }
.mp-consent[hidden] { display: none; }
.mp-consent-text { margin: 0; max-width: 680px; flex: 1 1 320px; }
.mp-consent-text a { color: var(--link, #1b5fb5); }
.mp-consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.mp-consent-btn { min-width: 112px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--accent, #102542);
    background: var(--accent, #102542); color: var(--bg, #ffffff); font: inherit; font-weight: 700; cursor: pointer; }
.mp-consent-btn:hover { filter: brightness(1.1); }
.mp-consent-btn:focus-visible, .mp-consent-link:focus-visible { outline: 2px solid var(--link, #1b5fb5); outline-offset: 2px; }
.mp-consent-link { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
/* On a phone the bar covered about 130 px of the first screen (2026-10-15): tighter type, padding and buttons bring it
   near 100 px. Same text, same two equal choices. */
@media (max-width: 520px) {
    .mp-consent { gap: 8px; padding: 8px 12px 10px; font-size: .8rem; line-height: 1.35; }
    .mp-consent-text { flex-basis: 100%; }
    .mp-consent-actions { width: 100%; gap: 8px; }
    .mp-consent-btn { flex: 1 1 0; min-width: 0; padding: 6px 12px; }
}