/**
 * Light NSML.org-aligned accents (main site uses Bootstrap 3 + navy #339 nav).
 * Loaded after the bundled Tailwind build via vite.config.mjs (index.html inject).
 */

html body {
  background-color: #f5f5f5 !important;
}

.dark html body {
  background-color: rgb(17 24 39) !important;
}

/* Echo the main site’s navy accent without overpowering issue-status cards */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #333399 0%, #5c6bc0 100%);
}

/* Match main banner width (720px) for readability on wide screens */
#root > div {
  max-width: 720px !important;
}

/*
 * Banner link + logo: Chrome often reports this SVG-as-<img> (wrapped PNG inside
 * <svg>) as 0×0 intrinsic size, so min-content on the <a> stays 0 and the header
 * flex row collapses to 0 height. Pin logical dimensions here and on logo.svg.
 */
#root a.nsml-banner-link {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  width: fit-content;
  max-width: 100%;
}

#root a.nsml-banner-link img {
  display: block;
  flex: none;
  box-sizing: border-box;
  /* Avoid % against the <a> (content-sized) — Chrome kept min-content at 0 */
  width: min(720px, 100vw);
  height: auto;
  aspect-ratio: 720 / 90;
  max-height: calc(var(--spacing, 0.25rem) * 30);
  object-fit: contain;
}