/* Lives in its own row of the existing sticky header, outside the answer form. */
.submission-deadline__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: fit-content;
  max-width: calc(100% - 1.5rem);
  margin: 0 auto .625rem;
  padding: .375rem .75rem;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.submission-deadline [hidden] {
  display: none !important;
}

.submission-deadline__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.submission-deadline__countdown {
  flex: none;
  min-width: 3.1em;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .025em;
}

.submission-deadline__badge[data-urgency="urgent"],
.submission-deadline__badge[data-urgency="closed"] {
  border-color: #fda4af;
  background: #fff1f2;
  color: #9f1239;
}

/* Keep keyboard/anchor navigation below the header and its warning row. */
html:has(.submission-deadline__badge:not([hidden])) {
  scroll-padding-top: 7rem;
}

@media (min-width: 640px) {
  .submission-deadline__badge {
    font-size: .8125rem;
  }

  html:has(.submission-deadline__badge:not([hidden])) {
    scroll-padding-top: 8.5rem;
  }
}