.consent-root{position:relative;z-index:var(--z-modal)}
/* The banner sticks to the bottom of the viewport, and at the end of the page
   it stands in flow after the legal line instead of over it. Fixed, it took no
   room in the page, so nothing could scroll out from under it: Privacy, Terms
   and Privacy settings sat behind it on every page, and focusing them changed
   no pixel in either theme (design-system 0.98.0, audit-focus.py). The host is
   the last child of <body>, so above the page end it looks as it did. */
.consent-root:has(> .consent-banner){position:sticky;bottom:0;padding:0 var(--space-4) var(--space-4)}
/* Keyboard focus stops above the stuck banner, with room for the ring.
   --consent-banner-h is the banner's measured height, set by consent.js. */
html:has(.consent-banner){scroll-padding-bottom:calc(var(--consent-banner-h) + var(--space-2))}
.consent-banner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  max-width:72rem;margin:0 auto;padding:var(--space-4);
  border:1px solid var(--border-strong);background:var(--surface-raised);box-shadow:var(--shadow-lg);
}
.consent-banner h2,.consent-settings h2{margin:0;font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-display)}
.consent-banner h2{font-size:var(--text-lg)}
/* A measure, because there was none. The banner's copy ran the full width of
   whatever bar held it: 89 characters on the brochure, 74 on games and creator
   -- and those two were right by accident, their container simply being
   narrower. Nothing held them there.
   45-75 characters is the readable range for continuous text; a consent notice
   is short, but it is still prose someone reads before deciding. */
.consent-banner p,.consent-settings p{margin:var(--space-1) 0 0;max-width:var(--measure);color:var(--text-muted);line-height:1.5}
.consent-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.consent-actions .btn{flex:1 1 auto;white-space:nowrap}
.consent-backdrop{
  position:fixed;inset:0;display:grid;place-items:center;padding:var(--space-4);
  background:color-mix(in srgb,var(--color-accent-900) 42%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.consent-settings{width:min(40rem,100%);max-height:calc(100vh - var(--space-8));overflow:auto;padding:var(--space-5);border:1px solid var(--border-strong);background:var(--surface-raised);box-shadow:var(--shadow-lg)}
.consent-options{display:grid;gap:var(--space-2);margin:var(--space-5) 0}
.consent-option{padding:var(--space-3);border:1px solid var(--border)}
.consent-option span{display:grid;gap:var(--space-1)}
.consent-option small{color:var(--text-muted);line-height:1.45}
.consent-signal{padding:var(--space-3);border:1px solid var(--border-strong)}
.consent-policy{font-size: var(--text-base)}
.consent-policy a{color:var(--color-link)}
/* .privacy-settings-button styling is .stl-legal-footer's (design-system 0.89.0):
   the consent opener sits in the legal line as a quiet link, same colour, same
   floor, same hover as Privacy and Terms beside it. The class stays as the hook. */
@media (max-width:700px){
  .consent-root:has(> .consent-banner){padding:0 var(--space-2) var(--space-2)}
  .consent-banner{align-items:stretch;flex-direction:column}
  .consent-actions{display:grid;grid-template-columns:repeat(2,1fr)}
  .consent-actions .btn{padding-inline:var(--space-2);white-space:normal}
  .consent-settings{padding:var(--space-4)}
}