@layer components {
  /* The cookie notice in the .site-dock, with the language tip above it. */
  .site-notice {
    display: grid;
    justify-items: center;
    gap: var(--inline-space);

    padding-block: var(--block-space-half);
    padding-inline: var(--block-space);

    font-size: var(--text-small);
    background: color-mix(in oklab, var(--color-brand) 8%, var(--color-surface));
    color: var(--color-text);
    border-block-start: 1px solid var(--color-border);
    box-shadow: var(--shadow);
  }

  .site-notice:not(:has(> .site-notice__cookies:not([hidden]))) { display: none; }

  /* The button stays beside the message, which wraps next to it rather than pushing it down a line. */
  .site-notice__cookies {
    display: flex;
    align-items: center;
    gap: var(--block-space);
  }

  .site-notice__message { margin: 0; }

  /* A tip, set apart from the notice by a faint rule that fades out at both ends. */
  .site-notice__languages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: var(--block-space);
  }

  .site-notice__languages::after {
    content: "";
    flex: 0 0 100%;
    block-size: 1px;
    margin-block-start: var(--inline-space);
    background: linear-gradient(to right, transparent, color-mix(in oklab, currentColor 30%, transparent), transparent);
  }

  .site-notice__tip { inline-size: 1.15em; block-size: 1.15em; flex-shrink: 0; color: var(--color-brand); }

  .site-notice__language {
    font-weight: 600;
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .site-notice__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--inline-space);
  }

  .site-notice__accept,
  .site-notice__decline {
    padding-block: 0.2em;
    padding-inline: 0.85em;
    border-radius: 999px;
    font: inherit;
    font-size: var(--text-x-small);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }

  .site-notice__accept {
    border: 0;
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-weight: 600;
  }

  .site-notice__accept:hover { background: var(--color-brand-strong); }

  /* Decline is the quieter, secondary choice — a plain outline. */
  .site-notice__decline {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-subtle);
  }

  .site-notice__decline:hover {
    border-color: var(--color-border-strong);
    background: color-mix(in oklab, currentColor 8%, transparent);
  }
}