/* Header banner (site_banner.py fills the slot; banner.js rotates it). One stylesheet for
   Market, Appraisal, Missions, Legacy and /advertise. The frame always reserves its full box,
   so nothing moves while images load or ads rotate.
   Sizes (keep in step with SIZES in site_banner.py):
     viewport >= 1260 px  728x90
     900 to 1259 px       468x60
     760 to 899 px        320x50
     under 760 px         hidden (phones), with its "Advertise here" link */
.site-banner {
  display: none;
  grid-template-columns: 24px auto;
  column-gap: 8px;
  row-gap: 2px;
  align-content: center;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
.banner-side {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.banner-label {
  padding: 3px 3px 2px;
  border: 1px solid #39454b;
  border-radius: 3px;
  color: #8f9ca3;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.site-banner .banner-pause {
  width: 24px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #39454b;
  border-radius: 4px;
  background: transparent;
  color: #8f9ca3;
  font: 10px/1 Arial, sans-serif;
  letter-spacing: -1px;
  cursor: pointer;
}
.site-banner .banner-pause:hover { border-color: #8f9ca3; color: #e7edef; }
.site-banner .banner-pause[hidden] { display: none; }
.banner-frame {
  grid-row: 1;
  grid-column: 2;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #0e1417;
}
.banner-item {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
  color: #e7edef;
  text-decoration: none;
}
.banner-item.is-active { z-index: 1; opacity: 1; }
.banner-item picture, .banner-item img { display: block; width: 100%; height: 100%; }
.banner-item img { object-fit: contain; }
.site-banner .banner-pause:focus-visible, .banner-advertise:focus-visible {
  outline: 2px solid #83d7c7;
  outline-offset: 2px;
}
/* Inside the frame (which clips), so the focus ring is drawn on the inner edge. */
.banner-item:focus-visible { outline: 2px solid #83d7c7; outline-offset: -2px; }
.banner-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.banner-advertise {
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
  color: #829198;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: .3px;
  text-decoration: none;
}
.banner-advertise:hover { color: #e7edef; text-decoration: underline; }

/* The EVE Online referral while it has no art: a text banner in the site's colours, bold call to
   action on a starfield built from gradients, with a small "Referral link" tag (Bryan's pick,
   26 Oct 2026; deliberately not CCP's logo, artwork or branding). */
.banner-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  padding: 0 22px;
  border: 1px solid #83d7c7;
  border-radius: 4px;
  position: relative;
  background:
    radial-gradient(1px 1px at 8% 30%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 72%, #fff7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 29% 18%, #fffb 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 64%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 26%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 80%, #fffa 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 12%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 55%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 22%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 42%, #fff5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 12% 55%, #fffc 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 85%, #fffa 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 12%, #fffc 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 48%, #fff9 50%, transparent 51%),
    radial-gradient(2px 2px at 76% 70%, #ffff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 15%, #fffb 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 97% 82%, #fffb 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 12%, #fffa 50%, transparent 51%),
    radial-gradient(ellipse 45% 120% at 78% 50%, #83d7c72a, transparent 70%),
    radial-gradient(ellipse 40% 140% at 20% 100%, #b3a1de24, transparent 70%),
    linear-gradient(100deg, #070a10, #0d1420 60%, #121a2b);
}
.banner-text-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.banner-text-copy strong {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 12px #83d7c740;
}
.banner-text-copy span { color: #a9b6bc; font-size: 13px; line-height: 1.2; }
.banner-text-action {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid #83d7c7;
  border-radius: 4px;
  background: #83d7c7;
  color: #0c1012;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.banner-text-action span { padding-left: 6px; }
.banner-tag {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 5px 1px;
  border: 1px solid #83d7c799;
  border-radius: 3px;
  background: #070a10cc;
  color: #bfe9e1;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.banner-item:hover .banner-text-action { border-color: #a6e6da; background: #a6e6da; }

@media (prefers-reduced-motion: reduce) { .banner-item { transition: none; } }

/* Market, Appraisal, Missions: between the brand and the right-hand links. The decorative
   "NEW EDEN INTELLIGENCE" label gives way to the banner (728x90 needs its room at 1440). */
.masthead .site-banner--header ~ .masthead-meta .network-label { display: none; }
@media (min-width: 760px) {
  .site-banner--header {
    display: grid;
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 107px; /* Missions' header (96 px) then matches the Market's 108 px */
    margin: 0 16px;
  }
  .site-banner--legacy {
    display: grid;
    width: max-content;
    margin: -44px auto 20px; /* uses most of the legacy header's 64 px top padding */
    text-align: left;
  }
}
@media (min-width: 1260px) {
  .banner-frame { width: 728px; height: 90px; }
}
@media (min-width: 900px) and (max-width: 1259px) {
  .banner-frame { width: 468px; height: 60px; }
  .banner-text { padding: 0 16px; }
  .banner-text-copy strong { font-size: 17px; }
  .banner-text-copy span { font-size: 11px; }
  .banner-text-action { padding: 5px 10px; font-size: 11px; line-height: 1.2; }
  /* 60 px tall: the corner tag and the button need every pixel to stay apart. */
  .banner-tag { top: 3px; right: 6px; padding: 1px 4px 0; line-height: 1; }
}
@media (min-width: 760px) and (max-width: 899px) {
  .banner-frame { width: 320px; height: 50px; }
  .banner-text { gap: 10px; padding: 0 12px; }
  .banner-text-copy strong { font-size: 13px; letter-spacing: .6px; }
  .banner-text-copy { gap: 2px; }
  .banner-text-copy span { display: none; }
  /* No room in a 50 px corner next to the button: the tag goes under the headline. */
  .banner-tag { position: static; align-self: flex-start; padding: 1px 4px 0; letter-spacing: .8px; }
  .banner-text-action { padding: 5px 8px; font-size: 10px; letter-spacing: .8px; }
}

/* "Paint it Black" (docs/PAINT_IT_BLACK.md). Corp ads are paid art and stay exactly as sent: only
   the frame around them and the site's own text referral banner turn grey. The starfield keeps
   its white stars; its teal and purple glows, border and button become greys, and the
   "REFERRAL LINK" tag stays light text on a near-black chip (well above AA). */
:where(html[data-theme="black"]) .banner-label,
:where(html[data-theme="black"]) .site-banner .banner-pause { border-color: #444; color: #a6a6a6; }
:where(html[data-theme="black"]) .site-banner .banner-pause:hover { border-color: #a6a6a6; color: #ededed; }
:where(html[data-theme="black"]) .banner-frame { background: #101010; }
:where(html[data-theme="black"]) .banner-item { color: #ededed; }
:where(html[data-theme="black"]) .site-banner .banner-pause:focus-visible,
:where(html[data-theme="black"]) .banner-advertise:focus-visible { outline-color: #fff; }
:where(html[data-theme="black"]) .banner-item:focus-visible { outline-color: #fff; }
:where(html[data-theme="black"]) .banner-advertise { color: #969696; }
:where(html[data-theme="black"]) .banner-advertise:hover { color: #ededed; }
:where(html[data-theme="black"]) .banner-text {
  border-color: #8a8a8a;
  background:
    radial-gradient(1px 1px at 8% 30%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 72%, #fff7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 29% 18%, #fffb 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 64%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 26%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 80%, #fffa 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 12%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 55%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 22%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 42%, #fff5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 12% 55%, #fffc 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 85%, #fffa 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 12%, #fffc 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 48%, #fff9 50%, transparent 51%),
    radial-gradient(2px 2px at 76% 70%, #ffff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 15%, #fffb 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 97% 82%, #fffb 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 12%, #fffa 50%, transparent 51%),
    radial-gradient(ellipse 45% 120% at 78% 50%, #ffffff1c, transparent 70%),
    radial-gradient(ellipse 40% 140% at 20% 100%, #ffffff12, transparent 70%),
    linear-gradient(100deg, #050505, #0f0f0f 60%, #1a1a1a);
}
:where(html[data-theme="black"]) .banner-text-copy strong { text-shadow: 0 0 12px #ffffff30; }
:where(html[data-theme="black"]) .banner-text-copy span { color: #b3b3b3; }
:where(html[data-theme="black"]) .banner-text-action { border-color: #ededed; background: #ededed; color: #0a0a0a; }
:where(html[data-theme="black"]) .banner-item:hover .banner-text-action { border-color: #fff; background: #fff; }
:where(html[data-theme="black"]) .banner-tag { border-color: #9a9a9a; background: #050505e6; color: #e6e6e6; }