/* The Google Analytics consent prompt on the classroom page (shared/js/analyticsConsent.js).
   Centred just below the page's top row (logo on the left, Home, pen and fullscreen
   on the right) and clear of the floating toolbar along the bottom edge. */
.analytics-consent {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--cs-z-toast, 3000);
    box-sizing: border-box;
    width: min(560px, calc(100vw - 32px));
    padding: var(--cs-space-4, 16px) var(--cs-space-5, 20px);
    background: var(--cs-color-surface, #ffffff);
    color: var(--cs-color-ink, #1f2933);
    border: 2px solid var(--cs-color-ink, #1f2933);
    border-radius: var(--cs-radius-lg, 8px);
    box-shadow: 4px 4px 0 rgb(31 41 51 / 0.18);
    font-family: var(--cs-font-sans, system-ui, sans-serif);
    font-size: 15px;
    line-height: 1.45;
}

.analytics-consent p {
    margin: 0;
}

.analytics-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-space-2, 8px);
    margin-top: var(--cs-space-3, 12px);
}

/* Allow and No thanks look the same, so neither is the easier choice. */
.analytics-consent-actions button {
    min-width: 112px;
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--cs-color-ink, #1f2933);
    background: var(--cs-color-surface-raised, #f8fafc);
    border: 2px solid var(--cs-color-ink, #1f2933);
    border-radius: var(--cs-radius-md, 6px);
    cursor: pointer;
}

.analytics-consent-actions button:hover {
    background: var(--cs-color-border, #d9e2ec);
}

.analytics-consent button:focus-visible,
.analytics-consent a:focus-visible {
    outline: none;
    box-shadow: var(--cs-focus-ring, 0 0 0 3px rgb(124 58 237 / 0.28));
}

.analytics-consent-note {
    margin-top: var(--cs-space-2, 8px) !important;
    font-size: 13px;
    color: var(--cs-color-muted, #52606d);
}

.analytics-consent-note a {
    color: inherit;
}