body:has(> [data-analytics-root]) { display: flex; flex-direction: column; min-height: 100dvh; }
body:has(> [data-analytics-root]) > main { flex: 1; min-height: 0; }

/* The tokens come from site.css. The fallbacks hold the same values for the placeholder
   layout, which loads only placeholder.css. */
[data-analytics-root] {
  --ac-ink: var(--ink, #111418);
  --ac-ink-2: var(--ink-2, #222831);
  --ac-slate: var(--slate, #4B576A);
  --ac-edge: var(--slate-2, #636F82);
  --ac-line: var(--line, #DCE0E6);
  --ac-line-2: var(--line-2, #E8EBEF);
  --ac-surface: var(--surface, #FFFFFF);
  --ac-surface-2: var(--surface-2, #F8F9FB);
  --ac-blue: var(--blue, #386FA9);
  --ac-sans: var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --ac-serif: var(--serif, "Newsreader", Georgia, "Times New Roman", serif);
  --ac-gutter: var(--gutter, clamp(16px, 4vw, 40px));
  flex-shrink: 0;
  font: 400 15px/1.55 var(--ac-sans);
  color: var(--ac-ink);
}
[data-analytics-root], [data-analytics-root] * { box-sizing: border-box; }
[data-analytics-root] [hidden] { display: none; }
:where([data-analytics-root] p) { margin: 0; }
[data-analytics-root] a { color: var(--ac-blue); text-underline-offset: 3px; }
[data-analytics-root] :focus-visible { outline: 2px solid var(--ac-blue); outline-offset: 2px; }

.analytics-scope { font-size: 13px; line-height: 1.5; color: var(--ac-slate); }
.analytics-scope:empty { display: none; }

/* Allow and Decline: one size, weight and color wherever both show. The edge is
   --slate-2 (5.1:1 on white) so the buttons read as controls. */
.analytics-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 12px; }
.analytics-actions button { min-height: 48px; padding: 10px 18px; border: 1px solid var(--ac-edge); border-radius: 9px; background: var(--ac-surface); color: var(--ac-ink); font: 500 15px/1.2 var(--ac-sans); white-space: nowrap; cursor: pointer; }
.analytics-actions button:hover { background: var(--ac-surface-2); border-color: var(--ac-ink-2); }

/* Strip: a compact band in the page flow, on the 1240px page grid (the .wrap rule in site.css). */
.analytics-strip { border-top: 1px solid var(--ac-line); background: var(--ac-surface); }
.analytics-strip[hidden] { display: none; }
.analytics-strip-inner { position: relative; display: flex; align-items: center; gap: 16px 48px; max-width: 1240px; margin: 0 auto; padding: 20px calc(var(--ac-gutter) + 44px) 20px var(--ac-gutter); }
.analytics-strip-copy { flex: 1 1 auto; max-width: 64ch; }
.analytics-strip h2 { margin: 0 0 2px; font: 600 15px/1.4 var(--ac-sans); letter-spacing: normal; }
.analytics-strip-copy > p:not(.analytics-scope) { color: var(--ac-ink-2); }
.analytics-strip .analytics-scope { margin-top: 6px; }
.analytics-strip .analytics-actions { flex-shrink: 0; margin-left: auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.analytics-close { position: absolute; top: 12px; right: calc(var(--ac-gutter) - 10px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ac-slate); cursor: pointer; }
.analytics-close:hover { background: rgb(17 20 24 / 6%); color: var(--ac-ink); }

/* The footer link that opens the preferences dialog (partials/cookie-preferences.njk). */
.analytics-footer { padding: 8px 24px; font-size: 12px; }
.analytics-footer a { display: inline-flex; min-height: 48px; align-items: center; }

/* Dialog: title, scope line, purpose, one status panel, helper lines, then a footer with
   the choices. The footer is the bottom edge and stays in view when the content scrolls. */
.analytics-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid var(--ac-line); border-radius: 16px; background: var(--ac-surface); color: var(--ac-ink); box-shadow: var(--shadow-panel, 0 24px 60px -24px rgb(34 40 49 / 28%)); }
.analytics-dialog::backdrop { background: rgb(17 20 24 / 45%); }
.analytics-dialog-body { padding: 30px 32px 8px; }
.analytics-dialog-body > p { margin-bottom: 12px; color: var(--ac-ink-2); }
.analytics-dialog-body > .analytics-dialog-scope { font-size: 14px; color: var(--ac-slate); }
.analytics-dialog-body > .analytics-scope { margin-bottom: 8px; color: var(--ac-slate); }
.analytics-dialog h2 { margin: 0 0 14px; font: 500 30px/1.1 var(--ac-serif); letter-spacing: -.02em; }
/* The heading takes the first focus when the dialog opens; it is not a control, so it shows no ring. */
.analytics-dialog h2:focus-visible { outline: none; }
.analytics-state { margin: 20px 0 16px; padding: 14px 16px; border: 1px solid var(--ac-line); border-radius: 10px; background: var(--ac-surface-2); }
.analytics-state .analytics-scope { margin-top: 2px; }
.analytics-status { font-weight: 600; color: var(--ac-ink); }
.analytics-gpc { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ac-line); color: var(--ac-ink-2); }
.analytics-dialog-footer { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 16px; padding: 16px 32px 24px; border-top: 1px solid var(--ac-line-2); background: var(--ac-surface); }
.analytics-dialog-footer .analytics-actions { flex-shrink: 0; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.analytics-dialog-close { min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ac-ink); font: 500 15px/1 var(--ac-sans); cursor: pointer; }
.analytics-dialog-close:hover { background: rgb(17 20 24 / 6%); }

/* Strip on a narrow screen: copy above the choices, which stack when two labels do not fit. */
@media (width < 1024px) {
  .analytics-strip-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px var(--ac-gutter) 18px; }
  .analytics-strip h2 { padding-right: 40px; }
  .analytics-close { top: 6px; }
  .analytics-strip .analytics-actions { max-width: 30rem; margin-left: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); grid-auto-flow: row; }
}
@media (width < 600px) {
  .analytics-dialog-body { padding: 22px 20px 4px; }
  .analytics-dialog h2 { font-size: 26px; }
  .analytics-dialog-footer { flex-direction: column; align-items: stretch; padding: 14px 20px 18px; }
  .analytics-dialog-footer .analytics-actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); grid-auto-flow: row; }
}
@media (prefers-reduced-motion: reduce) {
  [data-analytics-root] * { transition: none !important; animation: none !important; }
}