/* ==========================================================================
   The question before Google Analytics runs (src/components/Consent.astro):
   a quiet pill at the foot of the screen, on every page and in the reader alike,
   so its colours are its own. It never covers the page's own controls for
   long: one tap answers it.
   ========================================================================== */
.consent{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:999px;background:#fff;color:#2c3646;border:1px solid #dbe5f1;box-shadow:0 14px 40px rgba(16,32,64,.22);font:400 .92rem/1.45 "Figtree",system-ui,sans-serif}
.consent[hidden]{display:none}
/* The h mark in its own colours, so it reads the same on the site and in the reader. */
.consent-mark{flex:none;width:24px}
.consent-mark svg{display:block;width:100%;height:auto;overflow:visible}
.consent-mark .hr-s path{fill:#1d3a5f}
.consent-mark .p1{fill:#31649e}.consent-mark .p2{fill:#b04b3a}.consent-mark .p3{fill:#197256}.consent-mark .p4{fill:#7a4796}.consent-mark .p5{fill:#52525d}
.consent-text{margin:0}
.consent-text a{color:#234b76;text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:8px;margin:0}
.consent button{min-height:40px;padding:0 14px;border-radius:999px;font:700 .9rem "Figtree",system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.consent-yes{border:0;background:#234b76;color:#fff}
.consent-no{border:1.5px solid #cbd9ea;background:transparent;color:#1d3a5f}
.consent :focus-visible{outline:3px solid #31649e;outline-offset:2px}
/* On a phone the pill becomes a small card, so the words and buttons fit. */
@media(max-width:640px){
  .consent{left:16px;right:16px;transform:none;width:auto;flex-wrap:wrap;padding:14px 16px;border-radius:20px}
  .consent-text{flex:1 1 200px}
}
html[data-theme="dark"] .consent,body.dark .consent{background:#1b2330;color:#c9d4e2;border-color:#2b3a50}
html[data-theme="dark"] .consent-mark .hr-s path,body.dark .consent-mark .hr-s path{fill:#eef3f9}
html[data-theme="dark"] .consent-mark .p1,body.dark .consent-mark .p1{fill:#a9c8ee}
html[data-theme="dark"] .consent-mark .p2,body.dark .consent-mark .p2{fill:#f0a091}
html[data-theme="dark"] .consent-mark .p3,body.dark .consent-mark .p3{fill:#7fd0ad}
html[data-theme="dark"] .consent-mark .p4,body.dark .consent-mark .p4{fill:#d3b0e8}
html[data-theme="dark"] .consent-mark .p5,body.dark .consent-mark .p5{fill:#cfcfd8}
html[data-theme="dark"] .consent-text a,body.dark .consent-text a{color:#b3cff1}
html[data-theme="dark"] .consent-yes,body.dark .consent-yes{background:#b3cff1;color:#121820}
html[data-theme="dark"] .consent-no,body.dark .consent-no{border-color:#33425a;color:#eef3f9}
html[data-theme="dark"] .consent :focus-visible,body.dark .consent :focus-visible{outline-color:#8ab4e8}
@media(forced-colors:active){.consent{border:1px solid CanvasText}.consent button{border:1px solid ButtonText}}