/* Cookie consent (Prompt 17 Part B; Figma desktop 1518:53217, tablet 2301:100054, phone 2302:30698). Markup partials/consent.njk,
   behaviour js/consent.js. Loaded on every page by layouts/base.njk. Phone text styles come from tokens.css (type scale switches under 600). */
:root{
  --consent-banner-w: 480px;     /* not a Figma token yet: banner width (desktop / tablet) */
  --consent-modal-w: 560px;      /* not a Figma token yet: preferences modal width (desktop / tablet) */
  --consent-edge: var(--space-24);
  --consent-shadow: 0 8px 24px rgba(26, 20, 15, 0.18);   /* not a Figma token yet: banner / modal drop shadow (no Elevation style) */
  --consent-scrim: rgba(20, 18, 15, 0.4);               /* not a Figma token yet: same value as the Sign-in modal scrim (auth-modal.css) */
  --consent-tabbar-h: 116px;                             /* not a Figma token yet: App / Tab Bar height (Figma 116, app-home.css) */
}

/* Banner "Your privacy" (Figma 1518:53219): 480, padding 24, gap 16, radius 16, surface/default, border/default */
.consent-banner{position:fixed;left:var(--consent-edge);bottom:var(--consent-edge);z-index:95;box-sizing:border-box;width:var(--consent-banner-w);max-width:calc(100vw - 2 * var(--consent-edge));
  display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-24);background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--consent-shadow);color:var(--text-primary)}
.consent-banner[hidden]{display:none}
.consent-banner__title{margin:0;font:var(--text-2xl);text-transform:uppercase;color:var(--text-primary)}
.consent-banner__text{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.consent-banner__actions{display:flex;flex-wrap:wrap;gap:var(--space-8)}

/* Preferences modal "Cookie preferences" (Figma 1518:53233): 560, padding 32, gap 20, radius 16 over a scrim */
.consent-modal{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:var(--space-16)}
.consent-modal[hidden]{display:none}
.consent-modal__scrim{position:absolute;inset:0;background:var(--consent-scrim)}
.consent-modal__panel{position:relative;box-sizing:border-box;width:var(--consent-modal-w);max-width:100%;max-height:calc(100dvh - 2 * var(--space-16));overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:var(--space-20);padding:var(--space-32);background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--consent-shadow);color:var(--text-primary)}
.consent-modal__panel:focus{outline:0}
.consent-modal__title{margin:0;font:var(--text-3xl);text-transform:uppercase;color:var(--text-primary)}
.consent-modal__text{margin:0;font:var(--text-base);color:var(--text-secondary)}
.consent-modal__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-20)}
.consent-row{display:flex;align-items:center;gap:var(--space-16);padding:var(--space-16) 0;border-top:1px solid var(--border-default)}
.consent-row__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.consent-row__name{margin:0;font:var(--text-lg);color:var(--text-primary)}
.consent-row__desc{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.consent-modal__actions{display:flex;flex-wrap:wrap;gap:var(--space-8)}
html.consent-lock{overflow:hidden}

/* "Cookie settings" in the Footer legal row: a button that looks like the links next to it */
.footer__legal [data-consent-open]{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:var(--radius-sm)}
.footer__legal [data-consent-open]:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:2px}
.footer--dark .footer__legal [data-consent-open]:hover{color:inherit}

/* Motion: a short rise in, only when the reader has not asked for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .consent-banner.is-entering{animation:consent-rise .24s var(--ease-out,ease-out)}
  .consent-modal.is-entering .consent-modal__panel{animation:consent-rise .2s var(--ease-out,ease-out)}
  .consent-modal.is-entering .consent-modal__scrim{animation:consent-fade .2s ease-out}
}
@keyframes consent-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes consent-fade{from{opacity:0}to{opacity:1}}

/* Phone (<600, Figma 390): banner = full-width sheet 16 from the sides, sitting above the App / Tab Bar; buttons stacked full width.
   Preferences = bottom sheet, buttons stacked. Mobile text styles via the type scale. */
@media (max-width:599px){
  :root{--consent-edge:var(--space-16)}
  .consent-banner{left:var(--consent-edge);right:var(--consent-edge);width:auto;max-width:none;bottom:var(--consent-edge);padding:var(--space-20)}
  body:has(.app-tab-bar--fixed) .consent-banner{bottom:calc(var(--consent-tabbar-h) + env(safe-area-inset-bottom,0px))}
  .consent-banner__actions,.consent-modal__actions{flex-direction:column}
  .consent-banner__actions .btn,.consent-modal__actions .btn{width:100%}
  .consent-banner__title{font:var(--text-2xl)}
  .consent-modal{align-items:flex-end}
  .consent-modal__panel{width:100%;padding:var(--space-24)}
}

/* Static specimen on the design-system page (components.njk) */
.consent-banner--demo{position:static;max-width:100%;box-shadow:var(--consent-shadow)}