/* Cookie consent modal -- the background IS inert while this is open
   (overlay intercepts clicks, page can't be scrolled/clicked through
   it). This is still not an illegal "cookie wall": the user always has
   an exit that isn't a cookie decision -- clicking the X closes the
   modal WITHOUT recording a choice (see cookie-consent.js) -- so nobody
   is ever forced to accept/decline to keep using the site, only to
   dismiss this one modal first. A blocking wall with no neutral dismiss
   option, or an X that silently counts as acceptance, are the actual
   patterns EU DPAs (e.g. CNIL) have fined companies for. Centered on the
   page, on top of a fixed overlay; padding on .cookie-consent keeps it
   off the screen edges on small viewports (never full-height -- it must
   not cover the whole screen on mobile). Accept/Decline are equal-size
   buttons (filled vs outlined), never a button-vs-text-link asymmetry --
   GDPR requires declining to be as easy as accepting.

   Colors use var(--token, fallback) so this drops in with a sane default
   look even before you wire it to your own design system's tokens --
   override --cc-accent/--cc-card-bg/--cc-text/--cc-text-dim/--cc-border
   to match your palette, or just edit the fallback hex values directly.

   The Signs brand pass (2026-10-18): fallbacks now point at the actual
   design-brief.md token values, not generic placeholders.
   --cc-accent-text is a SEPARATE token from --cc-text -- the accept
   button needs Midnight Ink text on the Ochre Signal fill (4.70:1,
   verified in design-brief.md's UI-component contrast check; white or
   Dawn Paper text on that same fill both fail AA). --cc-text-dim uses
   a darkened Warm Taupe (#6B6058, 5.56:1 on Dawn Paper) instead of the
   decorative Warm Taupe (#8B7E74, which only passes at large-text
   size) -- this is real legal-notice body text, not a decorative
   label, so it needs the real 4.5:1 AA floor. The reject button's
   border uses --cc-text (Midnight Ink), never an accent color --
   Ochre/Clay both fail the 3:1 non-text component contrast rule
   against Dawn Paper (see ui-components.md). */
.cookie-consent {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  font-family: var(--font-body, 'Karla', sans-serif);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent-overlay {
  position: absolute; inset: 0; background: rgba(31, 42, 68, 0.4); /* Midnight Ink, translucent */
}
.cookie-consent-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--cc-card-bg, #FBF3EA); color: var(--cc-text, #1F2A44);
  border-radius: 4px 14px 4px 14px; /* slightly irregular, not a generic uniform rounded box */
  padding: 32px 36px 28px;
  box-shadow: 0 8px 32px rgba(31, 42, 68, 0.2);
  border: 1px solid var(--cc-border, #DCD2C4);
}
.cookie-consent-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: rgba(31, 42, 68, 0.4); font-size: 22px; line-height: 1; cursor: pointer;
  padding: 4px;
}
.cookie-consent-close:hover { color: rgba(31, 42, 68, 0.7); }
.cookie-consent-title {
  margin: 0 28px 8px 0; font-size: 17px; font-weight: 600;
  font-family: var(--font-display, 'Fraunces', serif);
  color: var(--cc-text, #1F2A44);
}
.cookie-consent-body { margin: 0 0 28px; font-size: 13px; line-height: 1.55; color: var(--cc-text-dim, #6B6058); }
.cookie-consent-body a { color: var(--cc-text, #1F2A44); text-decoration: underline; text-decoration-color: var(--cc-accent, #C8863B); text-underline-offset: 2px; }
.cookie-consent-actions { display: flex; gap: 10px; }
.cookie-consent-btn {
  flex: 1; font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 3px 9px 3px 9px;
  cursor: pointer; text-align: center;
}
.cookie-consent-accept { background: var(--cc-accent, #C8863B); color: var(--cc-accent-text, #1F2A44); border: 1px solid var(--cc-accent, #C8863B); }
.cookie-consent-reject { background: transparent; color: var(--cc-text, #1F2A44); border: 1px solid var(--cc-text, #1F2A44); }
.cookie-consent-btn:focus-visible { outline: 2px solid var(--cc-text, #1F2A44); outline-offset: 2px; }