.cookie-banner[hidden], [data-cookie-settings][hidden] { display: none; }
/* Pinned to the bottom, so the header and status strip stay visible on a first visit. */
.cookie-banner { position: fixed; inset: auto 0 0; z-index: 80; max-height: 70dvh; overflow-y: auto; background: var(--canvas); border-top: 1px solid var(--hover-edge); box-shadow: 0 -12px 32px #0007; padding-bottom: env(safe-area-inset-bottom); }
/* While it is open, leave room at the end of the page so the footer can still be scrolled into view. */
body:has(.cookie-banner:not([hidden])) { padding-bottom: 140px; }
@media (max-width: 700px) { body:has(.cookie-banner:not([hidden])) { padding-bottom: 260px; } }
.cookie-row { display: flex; align-items: center; gap: 24px; padding-block: 16px; }
.cookie-copy { flex: 1; min-width: 0; }
.cookie-banner h2, .cookie-settings h2 { margin: 0 0 5px; color: var(--heading); font: 700 20px/1.3 var(--title); }
.cookie-banner p, .cookie-settings p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cookie-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 8px; }
.cookie-actions button { min-height: 44px; min-width: 112px; padding: 10px 16px; border: 0; border-radius: 2px; color: var(--text); background: transparent; font: 500 14px/1.5 var(--body); }
/* White fill like Subscribe: ember is reserved for the AI summary, the current tab and "new" dots. */
.cookie-actions [data-cookie-accept] { color: var(--canvas); background: var(--heading); font-weight: 700; }
.cookie-actions [data-cookie-accept]:hover { background: #ffffff; }
.cookie-actions [data-cookie-reject]:hover, .cookie-actions [data-cookie-close]:hover { background: var(--track); }
[data-cookie-settings] { color: inherit; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 8px 4px; }
.cookie-settings { width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; color: var(--text); background: var(--canvas); border: 1px solid var(--hover-edge); }
.cookie-settings::backdrop { background: #0009; }
.cookie-settings p { margin-bottom: 16px; }
@media (max-width: 700px) { .cookie-row { align-items: stretch; flex-direction: column; gap: 12px; } }