/*
 * Analytics choice: the bar at the bottom of the page and the controls that
 * reopen it. Built by static/global/consent.js and linked only when the build
 * has an analytics ID.
 *
 * The bar is sticky, not fixed, and last in the layout. <body> is a column, and
 * `order` puts the bar after the footer. While the end of the page is out of
 * view it sticks to the bottom of the viewport, so it is seen at once. Scrolled
 * to the end, it sits below the footer in the normal flow, so it covers nothing,
 * and there is no padding to measure or keep in step with the bar's height.
 * Because it is added after everything else, no content that is on screen moves
 * when it appears (a page shorter than the window is the one exception: its
 * footer is pushed up by the bar's height).
 *
 * In the document it comes first, right after the skip link, so a keyboard
 * user meets the question before the page's hundreds of links.
 *
 * Colours come from the theme variables, so it follows light and dark. The two
 * buttons are styled identically on purpose: declining is as easy to see and
 * press as accepting.
 */
.consent-banner {
    position: sticky; bottom: 0; order: 100; z-index: 60;
    background: var(--bg-card); color: var(--text-main);
    border-top: 1px solid var(--border-light, var(--border));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 60vh; overflow-y: auto;
}
.consent-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
}
.consent-text { flex: 1 1 420px; min-width: 0; font-size: 0.9rem; line-height: 1.5; }
.consent-text p { margin: 0; }
.consent-title { font-weight: 600; font-size: 1rem; margin-bottom: 2px !important; }
.consent-current { margin-top: 4px !important; color: var(--text-muted); }
.consent-current:empty { display: none; }
.consent-text a { color: var(--text-main); text-decoration: underline; text-underline-offset: 3px; }
.consent-text a:hover { color: var(--accent); }

.consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-btn {
    min-height: 44px; padding: 10px 18px;
    font: inherit; font-weight: 600; line-height: 1.2;
    color: var(--text-main); background: transparent;
    border: 2px solid var(--text-main); border-radius: 8px; cursor: pointer;
}
.consent-btn:hover { background: var(--bg-hover); }

.consent-banner a:focus-visible,
.consent-btn:focus-visible,
.consent-open:focus-visible {
    outline: 3px solid var(--accent); outline-offset: 2px;
}

/* A control that reads as a link, for the footer and the privacy page. */
.consent-open {
    font: inherit; color: var(--text-muted); background: none; border: 0; padding: 0;
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.consent-open:hover { color: var(--accent); }
.consent-status { margin: 0 0 16px; }

@media (max-width: 600px) {
    .consent-banner { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .consent-text { flex-basis: 100%; font-size: 0.85rem; }
    .consent-actions { width: 100%; }
    .consent-btn { flex: 1 1 0; padding: 10px 8px; }
}

@media print { .consent-banner { display: none; } }