/* Privacy controls for analytics.js, plus its optional fixed-choice surveys.
   Consent lives in ordinary document flow so it cannot cover Google, Turnstile
   or the student's composer. IDs keep later page-wide heading/button styles
   from turning a small notice into a large marketing card. */

/* Ordinary pages place this after main and before the footer. Practice places
   it inside its flex layout, reserving space instead of overlaying the editor. */
#analytics-controls { box-sizing: border-box; width: min(68rem, calc(100% - 2rem)); margin: .5rem auto 1rem; color: var(--ink); font: 13px/1.5 system-ui, sans-serif; }
#analytics-controls .analytics-settings { display: block; margin: 0 0 .4rem auto; padding: .35rem .4rem; border: 0; background: transparent; color: var(--teal-strong); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#analytics-preferences { position: static; box-sizing: border-box; width: 100%; padding: .8rem 1rem; background: var(--paper); color: var(--ink); border: 1px solid var(--teal-strong); border-radius: .6rem; font: 13px/1.5 system-ui, sans-serif; }
#analytics-preferences h2 { margin: 0 0 .3rem; color: var(--ink); font: 600 14px/1.4 system-ui, sans-serif; letter-spacing: normal; }
#analytics-preferences p { margin: .3rem 0; color: var(--ink); font: inherit; }
#analytics-preferences .analytics-details { margin: .35rem 0 .5rem; }
#analytics-preferences summary { width: fit-content; color: var(--teal-strong); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#analytics-preferences .analytics-details[open] { padding-block: .3rem; }
#analytics-preferences .analytics-details[open] summary { margin-bottom: .5rem; }
#analytics-preferences label { display: block; margin: .6rem 0; color: var(--ink); font: inherit; }
#analytics-preferences input { appearance: auto; width: 1rem; height: 1rem; margin: 0 .3rem 0 0; padding: 0; vertical-align: -.15rem; accent-color: var(--teal-strong); }

/* Equal-weight choices remain easy to tap. Hidden Close and empty status text
   occupy no space; live errors appear without opening a modal or hiding login. */
#analytics-preferences .analytics-choice-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
#analytics-preferences button { min-height: 38px; margin: 0; padding: .4rem .7rem; border: 1px solid var(--teal-strong); border-radius: .35rem; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
#analytics-preferences button[hidden], #analytics-preferences [role="status"]:empty { display: none; }
#analytics-preferences button:hover, #analytics-controls .analytics-settings:hover { background: var(--teal-soft); }
#analytics-preferences button:focus-visible, #analytics-preferences summary:focus-visible, #analytics-preferences input:focus-visible, #analytics-controls .analytics-settings:focus-visible { outline: 3px solid var(--teal-strong); outline-offset: 3px; }

/* A detailed panel can scroll within the practice room while both main panels
   retain their own scrolling. Nothing is fixed on top of the send controls. */
.practice-page #analytics-controls { flex: none; width: 100%; margin: 0; max-height: min(38dvh, 22rem); overflow-y: auto; }
.practice-page #analytics-controls .analytics-settings { margin-bottom: .2rem; padding-block: .15rem; font-size: 11px; }
@media (max-width: 600px) {
  #analytics-controls { width: calc(100% - 1.5rem); }
  #analytics-preferences { padding: .75rem; }
  #analytics-preferences button { min-height: 44px; }
}

/* Surveys remain dismissible overlays opened only after deliberate product use.
   Their typography is also explicit because some public pages use large h2s. */
.usage-survey { position: fixed; z-index: 300; bottom: 1rem; right: 1rem; width: min(34rem, calc(100vw - 2rem)); max-height: 80vh; overflow: auto; padding: 1.4rem; background: var(--paper); color: var(--ink); border: 1px solid var(--teal-strong); border-radius: 1rem; box-shadow: 0 8px 35px var(--dialog-shadow); font: 16px/1.5 system-ui, sans-serif; }
#usage-survey h2 { font: 600 1.2rem/1.3 system-ui, sans-serif; margin: 0 0 .8rem; }
.usage-survey button { padding: .6rem .8rem; margin: .3rem; border: 1px solid var(--teal-strong); border-radius: .4rem; background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; }
.usage-survey button:focus-visible { outline: 3px solid var(--teal-strong); outline-offset: 2px; }