/* Cookie notice (shared/consent_notice.php, js/analytics.js): a bottom bar until the reader chooses.
   Tokens only (DESIGN.md). Fixed, so it never moves the page content; hidden until the script shows it. */
.pp-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; padding: 14px var(--vf-gutter) calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--vf-surface); color: var(--vf-ink);
  border-top: 1px solid var(--vf-rule-strong); box-shadow: 0 -8px 24px rgb(6 26 43 / .12); font: 400 14px/1.45 var(--vf-font-body); }
.pp-consent[hidden] { display: none; }
.pp-consent *, .pp-consent *::before, .pp-consent *::after { box-sizing: border-box; }
.pp-consent__text { flex: 1 1 360px; max-width: 78ch; margin: 0; color: var(--vf-ink-2); }
.pp-consent__text a { color: var(--vf-blue-text); text-decoration: underline; text-underline-offset: 2px; }
.pp-consent__text [hidden] { display: none; }
.pp-consent__actions { display: flex; flex: 0 0 auto; gap: 10px; }
.pp-consent__btn { min-height: 44px; padding: 0 20px; border: 1.5px solid var(--vf-ink-strong); border-radius: var(--vf-radius-pill); background: var(--vf-surface);
  color: var(--vf-ink-strong); font: 700 14px/1 var(--vf-font-body); cursor: pointer; transition: background var(--vf-ease), color var(--vf-ease); }
.pp-consent__btn:hover { background: var(--vf-action-soft); }
.pp-consent__btn--primary { border-color: var(--vf-action); background: var(--vf-action); color: var(--vf-on-accent); }
.pp-consent__btn--primary:hover { background: var(--vf-action-strong); }
.pp-consent__btn:focus-visible, .pp-consent__text a:focus-visible { outline: 3px solid var(--vf-blue-text); outline-offset: 3px; }
/* While the notice is open the Help button moves up so the two never overlap. */
body.pp-consent-open .vfh { bottom: calc(var(--pp-consent-h, 120px) + 16px); }
@media (max-width: 640px) {
  .pp-consent { gap: 10px; padding-top: 12px; font-size: 13px; }
  .pp-consent__text { flex-basis: 100%; }
  .pp-consent__actions { width: 100%; }
  .pp-consent__btn { flex: 1 1 0; padding: 0 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pp-consent:not([hidden]) { animation: pp-consent-in 200ms var(--vf-ease); }
  @keyframes pp-consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}