/* Shared by the HTML loading screen and React so startup keeps the same layout. */
body { margin: 0; }
.app-shell {
  --content-max-width: 920px;
  --page-gutter: clamp(20px, 4vw, 48px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #172033;
}

.app-content { flex: 1 0 auto; display: flex; flex-direction: column; }

.respondent-footer {
  flex: 0 0 auto;
  border-top: 1px solid #e9edf2;
  background: rgba(250, 251, 252, 0.96);
  color: #667085;
  font: 400 12px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.respondent-footer__inner {
  width: min(var(--content-max-width), calc(100% - 2 * var(--page-gutter)));
  margin: 0 auto;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.respondent-footer__brand { display: flex; align-items: center; gap: 8px; color: #344054; font-weight: 650; letter-spacing: -.01em; }
.respondent-footer__brand img { width: 22px; height: 22px; object-fit: contain; opacity: .8; }
.respondent-footer__links { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }
.respondent-footer__privacy-choices { display: inline-flex; align-items: center; gap: 5px; }
.respondent-footer__privacy-choices img { flex-shrink: 0; }
.respondent-footer a { color: #667085; text-decoration: none; transition: color 150ms ease; }
.respondent-footer a:hover, .respondent-footer a:focus-visible { color: #295fa6; text-decoration: underline; text-underline-offset: 3px; }
.respondent-footer p { margin: 0; white-space: nowrap; }

@media (max-width: 760px) {
  .respondent-footer__inner {
    min-height: 0;
    padding: 20px 0 76px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px 18px;
  }
  .respondent-footer__brand { align-self: start; }
  .respondent-footer__links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-left: 0;
    gap: 10px 20px;
  }
  .respondent-footer p {
    align-self: center;
    margin-left: auto;
    white-space: normal;
    text-align: right;
  }
}

@media (max-width: 430px) {
  .respondent-footer__links { gap: 8px 16px; }
}

.survey-loading {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px var(--page-gutter);
  background: #f3f5f7;
}

.survey-spinner {
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border: 2px solid #81b03c;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: survey-spin 0.75s linear infinite;
}

@keyframes survey-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .survey-spinner { animation: none; }
}