/* Hub additions on top of ui.css. Reads only var(--ui-*). */

/* Login */

.relay-login {
  max-width: 420px;
  margin: 12vh auto 0;
  padding: 0 var(--ui-space-base);
}

/* Header */

.relay-refresh {
  display: flex;
  align-items: center;
  gap: var(--ui-space-s);
}

@media (max-width: 1023px) {
  .relay-refresh > .ui-text {
    display: none;
  }
}

/* The one-row header is wider than a phone: wrap it, breadcrumbs on their own row. */
@media (max-width: 767px) {
  .ui-header {
    flex-wrap: wrap;
    height: auto;
    row-gap: var(--ui-space-xs);
    padding-block: var(--ui-space-xs);
  }

  .ui-header--fixed {
    position: static;
  }

  .ui-body--fixed-header {
    --ui-fixed-headers-offset: 0px;
    padding-top: 0;
  }

  .ui-header__section--grow {
    order: 1;
    flex-basis: 100%;
  }

  .ui-header__breadcrumbs {
    margin-inline: 0;
  }

  .ui-header__section--right {
    flex-shrink: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }

  .ui-header__logo > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* CTFd flyout */

.relay-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ui-space-s) var(--ui-space-base);
  margin: 0;
}

.relay-facts dt {
  color: var(--ui-color-text-subdued);
}

.relay-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Utilities */

.relay-search {
  min-width: 240px;
}

.relay-text-danger {
  color: var(--ui-color-text-danger);
}

.relay-mono {
  font-family: var(--ui-font-family-code);
  font-size: var(--ui-font-size-xs);
}

/* Markdown */

/* Shown as is until relay.js renders it, and when scripts are off. */
.relay-md-source {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--ui-font-size-xs);
}

.relay-md {
  overflow-wrap: anywhere;
}

.relay-md > :first-child {
  margin-top: 0;
}

.relay-md h2,
.relay-md h3,
.relay-md h4,
.relay-md h5,
.relay-md h6 {
  margin: var(--ui-space-l) 0 var(--ui-space-s);
  color: var(--ui-color-text-heading);
  font-weight: 700;
  line-height: 1.3;
}

.relay-md h2 {
  font-size: var(--ui-font-size-l);
}

.relay-md h3 {
  font-size: var(--ui-font-size-m);
}

.relay-md h4,
.relay-md h5,
.relay-md h6 {
  font-size: var(--ui-font-size-s);
}

.relay-md p,
.relay-md ul,
.relay-md ol,
.relay-md pre,
.relay-md table,
.relay-md blockquote {
  margin: 0 0 var(--ui-space-base);
}

.relay-md ul,
.relay-md ol {
  padding-left: var(--ui-space-l);
}

.relay-md ul {
  list-style: disc;
}

.relay-md ol {
  list-style: decimal;
}

.relay-md li + li {
  margin-top: var(--ui-space-xxs);
}

.relay-md a {
  color: var(--ui-color-text-primary);
}

.relay-md code {
  padding: 0 var(--ui-space-xxs);
  border-radius: var(--ui-radius-s);
  background: var(--ui-color-surface-subdued);
}

.relay-md pre {
  padding: var(--ui-space-s) var(--ui-space-base);
  border-radius: var(--ui-radius-m);
  background: var(--ui-color-surface-subdued);
  overflow-x: auto;
}

.relay-md pre code {
  padding: 0;
  background: none;
}

.relay-md table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

.relay-md th,
.relay-md td {
  padding: var(--ui-space-xs) var(--ui-space-s);
  border: var(--ui-border-width-thin) solid var(--ui-color-border);
  text-align: left;
}

.relay-md th {
  font-weight: 600;
}

.relay-md blockquote {
  padding-left: var(--ui-space-base);
  border-left: var(--ui-border-width-thick) solid var(--ui-color-border);
  color: var(--ui-color-text-subdued);
}