:root {
  --hdr-blue: #0a84ff;
  --hdr-blue-strong: #0066cc;
  --hdr-cyan: #5ac8fa;
  --hdr-lime: #34c759;
  --hdr-yellow: #ffcc00;
  --hdr-blue-glow: rgba(10, 132, 255, .55);
  --hdr-cyan-glow: rgba(90, 200, 250, .5);
}

.filing-number {
  display: flex;
  justify-content: center;
  padding: 18px 20px 4px;
  color: var(--ink-soft, #6f7888);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.filing-number a {
  color: inherit;
  text-decoration: none;
}

.filing-number a:hover {
  color: var(--pink-strong, #0066cc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@supports (color: color(display-p3 1 0 0)) {
  :root {
    --hdr-blue: color(display-p3 .06 .5 1);
    --hdr-blue-strong: color(display-p3 0 .36 .84);
    --hdr-cyan: color(display-p3 .18 .76 1);
    --hdr-lime: color(display-p3 .18 .78 .35);
    --hdr-yellow: color(display-p3 1 .78 0);
    --hdr-blue-glow: color(display-p3 .04 .5 1 / .62);
    --hdr-cyan-glow: color(display-p3 .16 .76 1 / .58);
  }
}

/* Keep SDR and wide-gamut displays on the existing palette. PQ is only used
   when the browser has both HDR color support and an HDR output surface. */
@supports (color: color(rec2100-pq .5 .5 .5)) {
  @media (dynamic-range: high) {
    :root {
      --hdr-blue: color(rec2100-pq .39 .68 .86);
      --hdr-blue-strong: color(rec2100-pq .32 .57 .74);
      --hdr-cyan: color(rec2100-pq .48 .74 .86);
      --hdr-lime: color(rec2100-pq .43 .73 .42);
      --hdr-yellow: color(rec2100-pq .78 .72 .24);
      --hdr-blue-glow: color(rec2100-pq .39 .68 .86 / .62);
      --hdr-cyan-glow: color(rec2100-pq .48 .74 .86 / .58);
    }
  }
}

@supports (dynamic-range-limit: no-limit) {
  html[data-hdr="active"],
  html[data-hdr="active"] body,
  html[data-hdr="active"] img,
  html[data-hdr="active"] video,
  html[data-hdr="active"] canvas {
    dynamic-range-limit: no-limit;
  }

  html[data-hdr="standard"] {
    dynamic-range-limit: standard;
  }
}

html[data-hdr="active"] body {
  --pink: var(--hdr-blue);
  --pink-strong: var(--hdr-blue-strong);
  --cyan: var(--hdr-cyan);
  --lime: var(--hdr-lime);
  --yellow: var(--hdr-yellow);
}

html[data-hdr="active"] body.subpage-body {
  --subpage-primary: var(--hdr-blue);
  --subpage-primary-dark: var(--hdr-blue-strong);
  --subpage-accent: var(--hdr-yellow);
}

html[data-hdr="active"] [data-theme-toggle] {
  position: relative;
}

html[data-hdr="active"] [data-theme-toggle]::after {
  content: attr(data-hdr-label);
  position: absolute;
  right: -5px;
  bottom: -2px;
  min-width: 22px;
  padding: 2px 4px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  color: #fff;
  background: var(--hdr-blue);
  box-shadow: 0 4px 14px var(--hdr-blue-glow);
  font-family: 'Quicksand', sans-serif;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
  pointer-events: none;
}

@media (dynamic-range: high) {
  html[data-hdr="active"] .button-primary,
  html[data-hdr="active"] .copy-button,
  html[data-hdr="active"] .admin-button.primary,
  html[data-hdr="active"] .nav-link.is-active {
    color: #062449;
    background: var(--hdr-blue);
    box-shadow: 0 12px 34px var(--hdr-blue-glow);
  }

  html[data-hdr="active"] .status-dot {
    box-shadow: 0 0 0 5px rgba(113, 217, 101, .17), 0 0 28px var(--hdr-cyan-glow);
  }

  html[data-hdr="active"] .hero-status::after {
    background: var(--hdr-blue);
    box-shadow: 0 0 78px var(--hdr-blue-glow);
  }

  html[data-hdr="active"] .brand-mark,
  html[data-hdr="active"] .upload-icon,
  html[data-hdr="active"] .panel-icon,
  html[data-hdr="active"] .drop-icon,
  html[data-hdr="active"] .drop-image-icon {
    filter: drop-shadow(0 0 14px var(--hdr-blue-glow));
  }
}