/* The cookie choice: a small card at the foot of the page, and a settings dialog.
   Postle's own dark look. Accept and Decline are deliberately the same weight. */

[data-analytics] { box-sizing: border-box; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #f1f2f4; color-scheme: dark; }
[data-analytics] *, [data-analytics] *::before, [data-analytics] *::after { box-sizing: border-box; }
[data-analytics][hidden], [data-analytics] [hidden] { display: none !important; }

.analytics-card { position: fixed; z-index: 180; inset-inline: 0; margin-inline: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: min(34rem, calc(100% - 28px)); padding: 16px 18px; border: 1px solid #2a2c33; border-radius: 20px; background: #15161a; box-shadow: 0 16px 50px rgb(0 0 0 / 0.6); }
body:has(dialog[open]) .analytics-card { visibility: hidden; }

/* On the game page the card must never sit on top of a post, a choice or Next: a tap there
   would do nothing. So while it is open it gets its own strip under the game, and the game
   scrolls in the space above it. (A browser without :has() keeps the floating card.) */
body:has(> #app):has(> .analytics-card:not([hidden])) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
body:has(> #app):has(> .analytics-card:not([hidden])) > #app { flex: 1; min-height: 0; overflow-y: auto; }
body:has(> #app):has(> .analytics-card:not([hidden])) > #app > .shell { min-height: 100%; }
body:has(> #app):has(> .analytics-card:not([hidden])) > .analytics-card { position: static; flex: none; margin-block: 8px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: none; }
[data-analytics] p { margin: 0; }
[data-analytics] .analytics-intro { margin: 0 0 14px; font-size: 15px; }
.analytics-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
[data-analytics] button { appearance: none; min-height: 44px; margin: 0; padding: 10px 18px; border: 1px solid #f1f2f4; border-radius: 99px; background: #f1f2f4; color: #0b0b0f; font: 800 14px/1.3 system-ui, sans-serif; cursor: pointer; }
[data-analytics] .analytics-button { flex: 1; }
[data-analytics] .analytics-manage { padding-inline: 10px; border-color: transparent; background: transparent; color: #8b8f98; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
[data-analytics] button:hover { filter: brightness(0.9); }
[data-analytics] .analytics-manage:hover { filter: none; color: #f1f2f4; }
[data-analytics] :focus-visible { outline: 3px solid #f1f2f4; outline-offset: 3px; }

[data-analytics].analytics-dialog { width: min(460px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 22px; overflow-y: auto; border: 1px solid #2a2c33; border-radius: 20px; background: #15161a; box-shadow: 0 20px 70px rgb(0 0 0 / 0.7); }
.analytics-dialog::backdrop { background: rgb(8 8 11 / 0.72); }
.analytics-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
[data-analytics] h2 { margin: 0; font: 900 20px/1.3 system-ui, sans-serif; letter-spacing: -0.02em; }
[data-analytics] .analytics-close { min-width: 44px; padding: 0; border-color: transparent; background: transparent; color: #8b8f98; font-size: 26px; font-weight: 400; }
.analytics-setting { display: flex; align-items: center; gap: 20px; justify-content: space-between; padding-block: 15px; border-top: 1px solid #2a2c33; }
[data-analytics] h3, [data-analytics] strong { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 800; }
[data-analytics] .analytics-setting p, .analytics-description { display: block; color: #8b8f98; font-size: 13px; }
.analytics-fixed { flex-shrink: 0; font-size: 12px; color: #8b8f98; }
[data-analytics] input { appearance: none; position: relative; flex: 0 0 44px; width: 44px; height: 26px; margin: 0; border: 1px solid #4a4d57; border-radius: 99px; background: #2a2c33; cursor: pointer; transition: background 0.12s; }
[data-analytics] input::before { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #8b8f98; transition: inset-inline-start 0.12s; }
[data-analytics] input:checked { background: #00ba7c; border-color: #00ba7c; }
[data-analytics] input:checked::before { inset-inline-start: calc(100% - 22px); background: #fff; }
[data-analytics] .analytics-note { margin-block: 12px; font-size: 12px; color: #8b8f98; }
[data-analytics] .analytics-policy { display: inline-block; margin-bottom: 18px; color: #f1f2f4; text-decoration: underline; text-underline-offset: 3px; }
.analytics-feedback:has(p:not([hidden])) { position: fixed; z-index: 181; inset-inline: 0; margin-inline: auto; bottom: 14px; width: min(34rem, calc(100% - 28px)); padding: 0 16px; border: 1px solid #2a2c33; border-radius: 14px; background: #15161a; }

@media (prefers-reduced-motion: reduce) { [data-analytics] input, [data-analytics] input::before { transition: none; } }