/**
 * Metaweb Book site layout – horizontal margins match Gov Hub (.container).
 * @see gov-hub-dev/static/css/govhub-design.css (--gh-content-max: 960px)
 */
:root {
  --mw-content-max: 960px;
  --mw-content-max-wide: 1080px;
  --mw-gutter-x: 1.25rem;
  --mw-gutter-x-sm: 0.75rem;
}

.mw-container,
.mw-site-inset {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mw-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--mw-gutter-x-sm), env(safe-area-inset-left, 0px));
  padding-right: max(var(--mw-gutter-x-sm), env(safe-area-inset-right, 0px));
}

@media (min-width: 768px) {
  .mw-container,
  .mw-site-inset {
    padding-left: max(var(--mw-gutter-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--mw-gutter-x), env(safe-area-inset-right, 0px));
  }
}

.mw-container-wide,
.mw-site-inset-wide {
  max-width: var(--mw-content-max-wide);
}

.mw-container-narrow {
  max-width: 640px;
}

.mw-container-medium {
  max-width: 720px;
}

/* Full-width band (background/border) with inset inner content */
.mw-band > .mw-band-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mw-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--mw-gutter-x-sm), env(safe-area-inset-left, 0px));
  padding-right: max(var(--mw-gutter-x-sm), env(safe-area-inset-right, 0px));
}

@media (min-width: 768px) {
  .mw-band > .mw-band-inner {
    padding-left: max(var(--mw-gutter-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--mw-gutter-x), env(safe-area-inset-right, 0px));
  }
}

.mw-band-wide > .mw-band-inner {
  max-width: var(--mw-content-max-wide);
}

/* Canopi extension loading spinner – shared across Metaweb reader UI */
.metaweb-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.metaweb-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent, #00d4ff);
  border-radius: 50%;
  animation: metaweb-loading-spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes metaweb-loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.status .metaweb-loading,
td.status .metaweb-loading,
li.status .metaweb-loading {
  padding: 24px;
}