/* ════════════════════════════════════════════════════════════
   Cookie consent banner — Wave 2
   Tokens come from /css/tokens.css (no raw hex declared here).
   ════════════════════════════════════════════════════════════ */

.agn-consent {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  color: var(--fg1);
  border: 1px solid var(--border);
  border-radius: var(--rad-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.agn-consent__copy {
  margin: 0;
  flex: 1 1 280px;
  color: var(--fg2);
}

.agn-consent__copy a {
  color: var(--verdant-web);
  text-decoration: underline;
}

.agn-consent__actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .agn-consent {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: var(--sp-3) var(--sp-4);
  }
  .agn-consent__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Dark-mode parity — surface flips to dark canopy with subtle border. */
.dark-mode .agn-consent {
  background: var(--canopy);
  color: var(--fg1-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-lg-dark);
}

.dark-mode .agn-consent__copy { color: var(--fg3-dark); }
.dark-mode .agn-consent__copy a { color: var(--verdant-app); }