.cookie-notice {
  position: fixed;
  z-index: 100;
  inset: auto 16px 16px;
  margin-inline: auto;
  box-sizing: border-box;
  max-width: 760px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border: 1px solid var(--color-line, #c7d1ba);
  border-radius: 12px;
  background: var(--color-surface, #fcfdf8);
  color: var(--color-ink, #222820);
  box-shadow: 0 4px 24px rgb(0 0 0 / 16%);
  font: 16px/1.5 Roboto, Arial, sans-serif;
}
.cookie-notice[hidden] { display: none; }
/* The legacy policy remains readable from its anchor without JavaScript. */
#policy:target { display: block; position: relative; top: auto; width: 100%; height: auto; max-height: none; }
#policy:target .modal-content, #policy:target .modal-footer { position: static; height: auto; overflow: visible; }
.cookie-notice p { margin: 0; font: inherit; }
.cookie-notice a { color: var(--color-accent-strong, #497224); text-decoration: underline; }
.cookie-notice button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: var(--color-button-bg, #222820);
  color: var(--color-button-ink, #fcfdf8);
  font: inherit;
  cursor: pointer;
}
.cookie-notice :focus-visible { outline: 3px solid var(--color-accent-strong, #497224); outline-offset: 3px; }
body .back-to-top { bottom: calc(var(--cookie-notice-height, 0px) + 32px); }
@media (max-width: 480px) {
  .cookie-notice { inset-inline: 12px; bottom: 12px; gap: 12px; padding: 12px; font-size: 14px; }
  .cookie-notice button { padding-inline: 12px; }
}