body.tenant-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-family-base);
}

.tenant-shell__header {
  order: 1;
}

.tenant-shell__header-anchor {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.tenant-shell__app {
  display: flex;
  flex: 1;
  flex-direction: column;
  order: 2;
}

.tenant-shell__app-root {
  flex: 1;
}

.tenant-shell__footer {
  order: 3;
}

body.tenant-shell.sdk-consumer--hide-header [data-qa="tenant-shell-header"],
body.tenant-shell.no-wrapper [data-qa="tenant-shell-header"],
body.tenant-shell.no-wrapper [data-qa="tenant-shell-footer"] {
  display: none;
}

.tenant-shell__image--failed,
.tenant-shell__image-fallback--hidden {
  display: none;
}

.tenant-shell__image--failed + .tenant-shell__image-fallback {
  display: inline;
}

.tenant-shell__skip-link {
  position: absolute;
  top: calc(var(--spacing-7) * -1);
  left: var(--spacing-2);
  z-index: 1000;
  padding: calc(var(--spacing-base) * 1.25) var(--spacing-2);
  border-radius: var(--spacing-1);
  background: var(--color-primary-background);
  color: var(--color-text-link);
  font-family: var(--font-family-base);
  font-size: calc(var(--font-size-base) * 0.875);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: top 0.15s ease;
}

.tenant-shell__skip-link:focus {
  top: 12px;
}

.tenant-shell__full-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  width: 100%;
  background: var(--color-brand-background);
  font-family: var(--font-family-base);
}

.tenant-shell__full-header-content,
.tenant-shell__full-footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.tenant-shell__full-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
}

.tenant-shell__full-header-branding {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.tenant-shell__full-header-logo,
.tenant-shell__co-brand-logo,
.tenant-shell__footer-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.tenant-shell__co-brand-logo {
  gap: var(--spacing-1);
}

.tenant-shell__full-header-logo-image,
.tenant-shell__footer-logo-image {
  display: block;
}

.tenant-shell__image-fallback {
  display: none;
  color: var(--color-button-primary-text);
  font-family: var(--font-family-base);
  font-size: calc(var(--font-size-base) * 1.25);
  font-weight: var(--font-weight-bold);
}

.tenant-shell__co-brand-label {
  color: var(--color-button-primary-text);
  font-size: calc(var(--font-size-base) * 0.75);
  opacity: 0.72;
}

.tenant-shell__full-footer {
  margin-top: auto;
  background: var(--color-brand-background);
}

.tenant-shell__full-footer-content {
  padding: var(--spacing-6) var(--spacing-3) var(--spacing-4);
}

.tenant-shell__full-footer-top,
.tenant-shell__footer-links {
  display: flex;
  flex-wrap: wrap;
}

.tenant-shell__full-footer-top {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.tenant-shell__footer-links {
  align-items: center;
  gap: var(--spacing-15) calc(var(--spacing-3) + var(--spacing-05));
}

.tenant-shell__footer-link {
  padding-bottom: calc(var(--spacing-05) / 2);
  border-bottom: var(--border-width-base) solid var(--color-button-primary-text);
  color: var(--color-button-primary-text);
  font-size: calc(var(--font-size-base) * 0.9375);
  text-decoration: none;
  opacity: 0.82;
}

.tenant-shell__footer-divider {
  margin: calc(var(--spacing-3) + var(--spacing-05)) 0;
  border: 0;
  border-top: var(--border-width-base) solid var(--color-button-primary-text);
  opacity: 0.2;
}

.tenant-shell__footer-legal-text,
.tenant-shell__footer-copyright {
  font-size: calc(var(--font-size-base) * 0.8125);
  line-height: calc(var(--spacing-2) + var(--spacing-05));
}

.tenant-shell__footer-legal-text {
  max-width: 900px;
  margin: 0 0 var(--spacing-15);
  color: var(--color-button-primary-text);
  opacity: 0.82;
}

.tenant-shell__footer-copyright {
  margin: var(--spacing-1) 0 0;
  color: var(--color-button-primary-text);
  opacity: 0.7;
}

.tenant-shell__minimal-header {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: var(--spacing-1) var(--spacing-3);
  border-bottom: var(--border-width-focus) solid var(--color-primary-highlight);
  background: var(--color-primary-background);
}

.tenant-shell__minimal-header-title {
  color: var(--color-text-body);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.tenant-shell__minimal-footer {
  margin-top: auto;
  padding: var(--spacing-2) var(--spacing-3);
  border-top: var(--border-width-base) solid var(--color-border-light);
  background: var(--color-primary-background);
}

.tenant-shell__minimal-footer-text {
  margin: 0;
  color: var(--color-text-body-light);
  font-family: var(--font-family-base);
  font-size: calc(var(--font-size-base) * 0.75);
  text-align: center;
}

body.tenant-shell.sdk-consumer--show-header {
  /* Reserve space for the two fixed, full-bleed bands: the tenant header (height
   * from config) and the SDK progress indicator beneath it. The 88px covers the
   * tallest observed progress band. This overrides the SDK's MSE-tuned padding. */
  padding-top: calc(var(--tenant-shell-header-height) + 88px);

  /* Match MSE: keep the SDK progress indicator fixed and full-bleed, simply offset
   * below the fixed header. The SDK mounts it inside a max-width form, so anything
   * other than fixed (e.g. sticky) would inherit that cap and leave side gutters.
   * The header is fixed and never leaves the viewport, so the SDK's
   * IntersectionObserver keeps --fixed off; we normalise both states for safety. */
  .question-progress.question-progress__header,
  .question-progress.question-progress__header--fixed {
    position: fixed;
    top: var(--tenant-shell-header-height);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    padding: 0;
    height: auto;
  }
}

.tenant-shell__app--results {
  /* Reserve space for the fixed tenant header so results content is not covered by
   * it. There is no progress indicator here (unlike the SDK rule above), so we
   * offset by the header height alone. The height is only published when the tenant
   * header has one configured; otherwise the 0 fallback adds no padding. */
  padding-top: var(--tenant-shell-header-height, 0);
}

.tenant-shell__app--question-set .wrapper__skeleton-loader {
  /* Offset the skeleton below the fixed tenant header, like the results rule above,
   * plus a small gap. height/overflow undo app-wrapper's viewport-height clip,
   * which would otherwise hide items and collide with the footer. */
  height: auto;
  overflow: visible;
  padding-top: calc(var(--tenant-shell-header-height, 0px) + var(--spacing-3));
}