/* /css/consent.css: the consent banner and the Privacy choices dialog (§7.2).
   "Allow ads" and "No ads" share one class, so they are identical in size, style, weight and color. */

.consent-banner {
  position: fixed;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 55;
  max-height: 40vh;
  overflow-y: auto;
  margin: 0 auto;
  max-width: 880px;
  padding: var(--s-4) var(--s-6) var(--s-4) var(--s-5);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-sans);
  font-size: .85rem;
  animation: consent-in 260ms var(--ease);
}
@keyframes consent-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.consent-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.consent-text { flex: 1 1 28ch; line-height: 1.5; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.btn.consent-choice { min-width: 9.5em; min-height: 44px; }
.consent-more { font-size: .82rem; }
.consent-close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink-muted);
  border-radius: var(--r-s);
}
.consent-close:hover { background: var(--surface-2); color: var(--ink); }

.consent-dialog {
  width: min(560px, calc(100vw - 2 * var(--s-4)));
  max-height: calc(100vh - 2 * var(--s-5));
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-sans);
  font-size: .88rem;
}
.consent-dialog::backdrop { background: rgba(14, 17, 22, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.consent-dialog > * + * { margin-top: var(--s-3); }
.consent-title { font-size: 1.4rem; }
.consent-note { display: flex; gap: .5em; align-items: flex-start; padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-m); }
.consent-options { display: grid; gap: var(--s-2); padding: var(--s-3) 0; border-block: 1px solid var(--rule); }
.consent-option { display: flex; gap: .6em; align-items: flex-start; }
.consent-option label { cursor: pointer; }
.consent-check { width: 1.2em; height: 1.2em; margin-top: .15em; flex: none; }
.consent-check:disabled + label { color: var(--ink-muted); cursor: not-allowed; }
.consent-sub { color: var(--ink-muted); }
.consent-help { font-size: .8rem; color: var(--ink-muted); }
.consent-dialog .consent-actions { padding-top: var(--s-2); }
.consent-dialog .btn.consent-choice { flex: 1 1 10em; }
@media (max-width: 599px) {
  .consent-banner { padding: var(--s-4) var(--s-4) var(--s-4); left: var(--s-2); right: var(--s-2); bottom: var(--s-2); }
  .btn.consent-choice { flex: 1 1 8em; }
  .consent-dialog { padding: var(--s-5) var(--s-4) var(--s-4); }
}