/* Analytics notices sit above the sticky header (30) and menus (50).
   Native dialog supplies its own top layer and keyboard focus handling. */
:root { --analytics-bg: #fff; --analytics-fg: #242620; --analytics-line: #c8ccc2; --analytics-muted: #51564e; }
:root[data-theme="dark"] { --analytics-bg: #252822; --analytics-fg: #f1f3ec; --analytics-line: #636b5c; --analytics-muted: #c3c9bc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --analytics-bg: #252822; --analytics-fg: #f1f3ec; --analytics-line: #636b5c; --analytics-muted: #c3c9bc; }
}
.analytics-banner, .analytics-dialog { font-family: var(--font-body); background: var(--analytics-bg); color: var(--analytics-fg); border: 1px solid var(--analytics-line); border-radius: 18px; box-shadow: 0 12px 44px rgb(20 30 20 / .18); font-size: 14px; line-height: 1.6; text-align: start; }
.analytics-banner[hidden], [data-analytics-preferences][hidden] { display: none !important; }
.analytics-banner { position: fixed; z-index: 60; inset: auto 16px max(16px, env(safe-area-inset-bottom)); margin-inline: auto; width: min(900px, calc(100% - 32px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 20px; }
.analytics-summary { min-width: 0; }
.analytics-summary strong { display: block; margin-bottom: 4px; font-size: 16px; line-height: 1.4; }
.analytics-summary p { color: var(--analytics-muted); }
.analytics-text-button { display: inline; padding: 0; border: 0; background: transparent; color: var(--analytics-fg); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; line-height: inherit; }
.analytics-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.analytics-controls .analytics-btn { min-height: 44px; padding: 10px 16px; border: 1px solid var(--analytics-fg); border-radius: 999px; background: var(--analytics-bg); color: var(--analytics-fg); font-weight: 650; line-height: 1.35; white-space: nowrap; }
.analytics-controls .analytics-accept { background: var(--analytics-fg); color: var(--analytics-bg); }
.analytics-controls .analytics-btn:hover { box-shadow: inset 0 0 0 1px currentColor; }
.analytics-controls .analytics-btn:active { transform: scale(.98); }
.analytics-banner :focus-visible, .analytics-dialog :focus-visible { outline: 3px solid var(--analytics-fg); outline-offset: 3px; }
.analytics-dialog { width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow-y: auto; }
.analytics-dialog::backdrop { background: rgb(16 24 16 / .5); }
.analytics-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.analytics-dialog-heading h2 { min-width: 0; font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.analytics-close { flex: none; min-height: 44px; margin-top: -8px; padding: 8px 0 8px 8px; border: 0; background: transparent; color: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.analytics-description p + p { margin-top: 12px; }
.analytics-description a { text-decoration: underline; text-underline-offset: 3px; }
.analytics-status { margin-block: 18px 12px; color: var(--analytics-muted); font-size: 13px; }
.analytics-dialog .analytics-controls { justify-content: flex-end; }
.preferences { flex-wrap: wrap; }
@media (max-width: 640px) {
  .analytics-banner { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; font-size: 13px; }
  .analytics-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-controls .analytics-btn { padding-inline: 10px; font-size: 13px; }
  .analytics-dialog { padding: 20px; }
  .analytics-dialog-heading h2 { font-size: 20px; }
}