/* The "Privacy settings" panel (assets/analytics.js): opened from the header menu, a footer link or the privacy
   policy; turns the site's usage analytics off or on. A card at the bottom of the screen that doesn't block the page.
   Tokens: tokens.css; RTL by the panel's own dir; fonts follow the page. */

.privacy-panel {
    position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 120;
    display: flex; justify-content: center; pointer-events: none;
    animation: ps-in 0.3s var(--ease-out) both;
}
.privacy-panel .ps-card {
    position: relative; pointer-events: auto; width: 100%; max-width: 480px;
    padding: 18px 18px 16px; border-radius: var(--r-md);
    background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
    font-size: 0.95rem; line-height: 1.5;
}
.privacy-panel .ps-title { font-weight: 800; font-size: 1.05rem; margin: 0 0 6px; padding-inline-end: 32px; }
.privacy-panel .ps-body { margin: 0; color: var(--ink-soft); }
.privacy-panel .ps-body a { color: var(--brand-700); font-weight: 700; white-space: nowrap; }
.privacy-panel .ps-status { margin: 10px 0 0; font-weight: 700; }
.privacy-panel .ps-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.privacy-panel .ps-btn {
    font: inherit; font-weight: 700; font-size: 1rem; padding: 12px 16px; border-radius: var(--r-pill); cursor: pointer;
    border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.privacy-panel .ps-done { background: var(--brand-grad); color: #fff; border-color: transparent; }
.privacy-panel .ps-btn:focus-visible, .privacy-panel .ps-close:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
.privacy-panel .ps-close {
    position: absolute; top: 10px; inset-inline-end: 10px; width: 32px; height: 32px; border-radius: var(--r-pill);
    border: 0; background: transparent; color: var(--ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.privacy-panel .ps-close:hover { background: var(--surface-2); }

@keyframes ps-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .privacy-panel { animation: none; } }