/* Consent controls (ADR-078; the banner's look is prototypes/cookie-banner).
   Colours come from the styles.css tokens, so the card follows the theme; the
   literals are the light palette for a page that loads this sheet first. */
.cookie-banner, .cookie-dialog, .cookie-error { box-sizing: border-box; background: var(--surface, #fff); color: var(--text, #0e1311); border: 1px solid var(--border, #e3e7df); border-radius: 12px; font: 14px/1.5 var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); box-shadow: var(--shadow-2, 0 4px 24px #0002); }
.cookie-dialog, .cookie-error { padding: 20px; }

/* The card: bottom right, one title, one line, two buttons, and the dog cropped
   by the card's bottom and right edges. Fixed width so the forced line break in
   the sentence lands the same everywhere; on a phone it shrinks to the viewport
   minus the gutters. */
.cookie-banner { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10000; width: min(340px, calc(100vw - 32px)); padding: 12px 14px; overflow: hidden; transition: opacity .45s ease, transform .45s ease; }
.cookie-banner.leaving { opacity: 0; transform: translateY(8px); pointer-events: none; }
.cookie-title { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.cookie-line { margin: 3px 0 0; min-height: 34px; color: var(--text-2, #2a302c); font-size: 12.5px; line-height: 1.4; white-space: nowrap; }
.cookie-line a { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--muted-2, #8a948e); text-underline-offset: 3px; }
.cookie-line a:hover { color: var(--text, #0e1311); text-decoration-style: solid; }
.cookie-banner .cookie-actions { margin-top: 14px; gap: 6px; }
.cookie-banner .cookie-actions button { min-height: 32px; padding: 6px 9px; font-size: 12px; font-weight: 500; border: 1px solid transparent; border-radius: 7px; line-height: 1.2; }
.cookie-banner .cookie-actions [data-cookie-choice="accept"] { background: var(--accent, #2b6a48); color: var(--accent-ink, #fff); }
.cookie-banner .cookie-actions [data-cookie-choice="accept"]:hover { filter: brightness(1.05); background: var(--accent, #2b6a48); }
.cookie-banner .cookie-actions [data-cookie-choice="reject"] { background: transparent; color: var(--text-2, #2a302c); border-color: var(--border-2, #d4dacf); }
.cookie-banner .cookie-actions [data-cookie-choice="reject"]:hover { background: var(--surface-2, #f3f5f1); color: var(--text, #0e1311); }
.cookie-art { position: absolute; right: -12px; bottom: -2px; width: 144px; height: auto; pointer-events: none; user-select: none; }

.cookie-dialog p { margin: 0 0 16px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-actions button { cursor: pointer; padding: 10px 16px; min-height: 44px; border: 1px solid var(--muted, #737e70); border-radius: 5px; background: var(--surface, #fff); color: var(--text, #0e1311); font: inherit; }
.cookie-actions button:hover { background: var(--surface-2, #eef2eb); }
.cookie-actions button:focus-visible, [data-cookie-settings]:focus-visible { outline: 2px solid var(--accent, #2b6a48); outline-offset: 3px; }
.cookie-dialog a { color: var(--accent, #2b6a48); text-decoration: underline; }
.cookie-dialog { width: min(540px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto; }
.cookie-dialog::backdrop { background: #0005; }
.cookie-dialog h2 { font-size: 21px; margin: 0 0 16px; }
.cookie-dialog label { display: flex; gap: 10px; align-items: center; font-weight: 600; margin-bottom: 8px; }
.cookie-error { position: fixed; z-index: 10002; bottom: 16px; left: 16px; right: 16px; }
.legal-links button, .foot button { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

/* The card is fixed, so it hides whatever sits under it at the bottom of the
   page. While it shows, the page gets that much room underneath (card height at
   the narrowest width, two-line title and line included, plus its 16px gutters),
   so every control and legal link can be scrolled clear of it. A choice, or the
   fade that follows it, takes the room away again. Phones only: from 641px up
   the card sits in the corner clear of the centred auth card. */
@media (max-width: 640px) {
  body:has(.cookie-banner:not([hidden], .leaving)) { padding-bottom: calc(var(--cookie-banner-room, 150px) + env(safe-area-inset-bottom, 0px)); }
}