/* The LGPD cookie banner (partials/cookie_banner.html): a floating card fixed at the bottom, as GitHub's own consent
   card is drawn, on Primer's tokens. Linked by the partial itself, so the banner is styled wherever it is included
   (Control standards: a fixed overlay carries its own stylesheet; a floating card, never page flow). The buttons'
   Primer look is repeated here, scoped to the banner, because a legal page loads no components.css. */
@layer components {
  .cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 10000;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 16px);
    background: var(--color-canvas-default);
    color: var(--color-fg-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-overlay);
    font-family: var(--font-sans, inherit);
    font-size: 14px;
    line-height: 20px;
  }
  .cookie-banner[hidden] { display: none; }
  .cookie-banner.exit { opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; }
  .cookie-banner-content { display: flex; align-items: flex-start; gap: var(--space-3, 12px); flex: 1; min-width: 0; }
  .cookie-banner-icon { display: inline-flex; flex-shrink: 0; margin-top: 2px; color: var(--color-fg-muted); }
  .cookie-banner-icon .octicon { color: inherit; }
  .cookie-banner-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--color-fg-default); }
  .cookie-banner-desc { margin: 0; font-size: 14px; line-height: 20px; color: var(--color-fg-muted); }
  .cookie-banner-desc a { color: var(--color-accent-fg); text-decoration: underline; }
  .cookie-banner-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2, 8px); flex-shrink: 0; }

  /* Primer Button (default and primary), so the banner looks the same on a page without components.css. */
  .cookie-banner .gh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--color-fg-default);
    background: var(--color-canvas-subtle);
    border: 1px solid color-mix(in oklab, var(--color-fg-default) 15%, transparent);
    border-radius: 6px;
  }
  .cookie-banner .gh-btn-primary {
    color: var(--brand-on-primary);
    background: var(--brand-primary);
  }
  .cookie-banner .gh-btn:focus-visible { outline: 2px solid var(--color-accent-fg); outline-offset: 2px; }

  @media (max-width: 543.98px) {
    .cookie-banner { flex-direction: column; align-items: stretch; gap: var(--space-3, 12px); }
    .cookie-banner-actions { flex-direction: column-reverse; align-items: stretch; }
    .cookie-banner .gh-btn { width: 100%; }
  }
}