/*
 * The cookie banner (consent.js), on the website and in the examiner app. Both load the shared
 * design tokens, so it follows each site's light and dark theme; the fallbacks only matter if a
 * page ever lacks them.
 */
.pn-consent {
  position: fixed;
  right: var(--space-4, 1rem);
  bottom: var(--space-4, 1rem);
  left: var(--space-4, 1rem);
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-4, 1rem);
  border: var(--border-ink, 2px solid #1b2440);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-paper, #ffffff);
  color: var(--color-text, #1b2440);
  box-shadow: var(--shadow-hard-sm, 2px 2px 0 #1b2440);
  font-size: var(--text-sm, 0.8125rem);
  line-height: 1.5;
}

.pn-consent-text {
  flex: 1 1 18rem;
  margin: 0;
}

.pn-consent-text a {
  color: inherit;
  font-weight: 700;
}

.pn-consent-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
}

/* Both answers look alike: equal weight is what makes it a real choice. */
.pn-consent-button {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border: var(--border-thin, 1.5px solid #1b2440);
  border-radius: var(--radius-md, 8px);
  background: var(--color-paper, #ffffff);
  color: var(--color-text, #1b2440);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.pn-consent-button:focus-visible,
.pn-cookie:focus-visible,
.pn-consent-text a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px #ffc53d);
}

/* The floating cookie button: bottom-left until someone drags it, then wherever they left it. */
.pn-cookie {
  position: fixed;
  bottom: var(--space-4, 1rem);
  left: var(--space-4, 1rem);
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: var(--border-ink, 2px solid #1b2440);
  border-radius: 50%;
  background: var(--color-paper, #ffffff);
  color: var(--color-text, #1b2440);
  box-shadow: var(--shadow-hard-sm, 2px 2px 0 #1b2440);
  cursor: grab;
  /* A finger dragging the button moves the button, not the page. */
  touch-action: none;
  user-select: none;
  transition:
    transform 90ms ease,
    box-shadow 90ms ease;
}

.pn-cookie:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hard, 3px 3px 0 #1b2440);
}

.pn-cookie-moved {
  top: var(--pn-cookie-y);
  bottom: auto;
  left: var(--pn-cookie-x);
}

.pn-cookie-dragging {
  cursor: grabbing;
  transform: scale(1.08);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .pn-cookie,
  .pn-cookie-dragging {
    transition: none;
    transform: none;
  }
}

@media (max-width: 36rem) {
  .pn-consent-actions {
    flex: 1 1 100%;
  }

  .pn-consent-button {
    flex: 1;
  }
}