/* ==========================================================================
   The question before Google Analytics runs (src/components/Consent.astro):
   Lyn asks it in a banner floating at the foot of the screen, on every page
   and in the reader alike, so its colours are its own. One tap answers it.
   ========================================================================== */
.consent{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:22px;width:min(860px,calc(100vw - 32px));padding:12px 14px;border:1px solid #dbe5f1;border-radius:20px;background:#fff;color:#2c3646;box-shadow:0 16px 40px rgba(10,20,40,.22);font:400 .92rem/1.45 "Figtree",system-ui,sans-serif}
.consent[hidden]{display:none}
.consent p{margin:0}
/* Her picture, with the little green dot that says she's there. */
.consent-lyn{position:relative;flex:none;width:42px;height:42px;padding-right:18px;border-right:1px solid #dbe5f1;box-sizing:content-box}
.consent-lyn img{display:block;width:42px;height:42px;border-radius:50%;object-fit:cover}
.consent-lyn i{position:absolute;right:19px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#34b27b;box-shadow:0 0 0 2px #fff}
.consent-say{flex:1;min-width:0}
.consent-q{font:700 .98rem/1.3 "Figtree",system-ui,sans-serif;color:#1d3a5f}
.consent-text{margin-top:2px!important;font-size:.86rem}
.consent-text a{color:#234b76;text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;flex:none;gap:6px}
.consent button{min-height:40px;padding:0 14px;border-radius:999px;font:700 .86rem "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}
@media(prefers-reduced-motion:no-preference){.consent:not([hidden]){animation:consentIn .45s cubic-bezier(.2,.8,.2,1) both}}
@keyframes consentIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
/* On a phone it stacks: her picture, the words, then the two answers side by side. */
@media(max-width:760px){
  .consent{flex-wrap:wrap;gap:10px 14px;padding:14px 16px}
  .consent-lyn{border-right:0}
  .consent-say,.consent-actions{flex:1 1 100%}
  .consent-actions button{flex:1}
}
html[data-theme="dark"] .consent,body.dark .consent{background:#1b2330;color:#c9d4e2;border-color:#2b3a50}
html[data-theme="dark"] .consent-lyn,body.dark .consent-lyn{border-color:#2b3a50}
html[data-theme="dark"] .consent-lyn i,body.dark .consent-lyn i{box-shadow:0 0 0 2px #1b2330}
html[data-theme="dark"] .consent-q,body.dark .consent-q{color:#eef3f9}
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}.consent-lyn i{forced-color-adjust:none}}