/* Shared styles, layouts, and utilities */

html {
  --text-primary: #fff;
  --text-secondary: #bbb;
  --primary-color: #4338ca;
  --primary-color-highlight: #4f46e5;
  --danger-color: #b91c1c;
  --danger-color-highlight: #991b1b;
  --danger-color-text: #f87171;
  --logo-color: #fde047;
  --text-link-color: #818cf8;
  --text-link-color-highlight: #a5b4fc;
  background: #000;
  color: var(--text-primary);
  font-family: sans-serif;
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

.color-logo {
  color: var(--logo-color);
}

h1 {
  font-size: 24px;
  color: var(--text-primary);
}

h2 {
  color: var(--text-secondary);
  font-size: 18px;
}

a {
  color: var(--text-link-color);
  cursor: pointer;
  font-weight: 500;
}

a:hover {
  color: var(--text-link-color-highlight);
}

.text-with-icon {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input,
select {
  border-radius: 8px;
  padding: 0.5rem;
  background: #444;
  color: var(--text-primary);
  width: 100%;
  border: 1px solid #666;
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 1rem;
}

.nav-header--with-home-link {
  justify-content: space-between;
}

.nav-header a {
  text-decoration: none;
}

.nav-header .home-link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--text-primary);
}

.nav-header__auth-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.nav-header a:hover {
  color: var(--text-secondary);
}

.icon--sm {
  display: inline;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.icon--md {
  display: inline;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.messages {
  margin-bottom: 1rem;
  position: fixed;
  right: 0;
  top: 0;
  padding: 1rem;
}

.messages .message {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #172554;
  color: #bfdbfe;
  border: 1px solid #1e3a8a;
  margin: 0.5rem auto;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  max-width: 40rem;
  min-width: 30rem;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  animation: appear 100ms;
}

.messages .message--warning {
  background: #422006;
  color: #fef08a;
  border-color: #713f12;
}

.messages .message--success {
  background: #052e16;
  color: #bbf7d0;
  border-color: #14532d;
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.messages .message .message__content {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.messages .message .message__dismissal-trigger {
  cursor: pointer;
}

.messages .message .message__progress-bar {
  position: absolute;
  left: 100%;
  bottom: 0;
  right: 0;
  height: 2px;
  background: #1e3a8a;
  /* This duration needs to match MESSAGE_TIMEOUT_MS in site.js */
  animation: progress-bar-wipe linear 10s;
}

.messages .message--warning .message__progress-bar {
  background: #713f12;
}

.messages .message--success .message__progress-bar {
  background: #14532d;
}

@keyframes progress-bar-wipe {
  from {
    left: 0;
  }

  to {
    left: 100%;
  }
}

.text--primary {
  color: var(--text-primary);
}

.text--secondary {
  color: var(--text-secondary);
}

.account-page {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

.account-page form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.account-page form ~ * {
  align-self: flex-end;
}

.button {
  font-weight: 500;
  cursor: pointer;
  color: var(--text-primary);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.button:hover {
  color: var(--text-secondary);
}

/* A button that looks like a link */
.button--link {
  color: var(--text-link-color);
}

.button--link:hover {
  color: var(--text-link-color-highlight);
}

.button--primary {
  background: var(--primary-color);
  text-decoration: none;
  border-radius: 1rem;
  padding: 0.25rem 1.25rem;
  box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.1);
}

a.button--primary:hover {
  color: var(--text-primary);
  background: var(--primary-color-highlight);
  text-decoration: none;
}

.button--primary:active {
  box-shadow: none;
}

.button--prominent,
.button--confirm,
.button--danger {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.1);
}

.button--prominent,
.button--confirm {
  background: var(--primary-color);
}

.button--danger {
  background: var(--danger-color);
}

.button--danger:hover {
  background: var(--danger-color-highlight);
  color: var(--text-primary);
}

.button--prominent:hover,
.button--confirm:hover {
  background: var(--primary-color-highlight);
  color: var(--text-primary);
}

.button--prominent:active,
.button--confirm:active {
  box-shadow: none;
}

.button-group {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.account-page .button-group {
  flex-direction: row-reverse;
}

.account-page form > button:last-child {
  align-self: flex-end;
  width: 100%;
}

.account-page p {
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
}

/* These forms only have hidden fields
 * but cause layout issues as flex children */
.account-page #resend,
.account-page #logout-from-stage {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.field--is-hidden {
  display: none;
}

.field label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}

.field__label--is-required:after {
  content: '*';
  color: var(--danger-color-text);
}

.field__help-text {
  font-size: 14px;
  color: #a1a1a1;
}

.field--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.field--checkbox input {
  width: auto;
  cursor: pointer;
}

.field--checkbox label {
  cursor: pointer;
}

.split-field-container {
  width: 100%;
  display: flex;
  gap: 1rem;
}

.split-field-container--50-50 .field {
  width: 50%;
}

.split-field-container--67-33 .field:first-child {
  width: 67%;
}

.split-field-container--67-33 .field:last-child {
  width: 33%;
}

.split-field-container--50-25-25 .field {
  width: 25%;
}

.split-field-container--50-25-25 .field:first-child {
  width: 50%;
}

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

.plaintext {
  font-family: 'Courier New';
}

.markdown {
  overflow: auto;
  padding: 0 1rem;
}

.markdown p,
.markdown ul .markdown ol {
  margin: 0.5rem 0;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 1rem 0;
}

.markdown table th,
.markdown table td {
  padding: 0.25rem 0.5rem;
  border: 1px solid #666;
}

.markdown table tr:nth-child(2n) {
  background: #333;
}

.main-content {
  width: 100%;
  max-width: 60rem;
  background: #333;
  padding: 1rem;
  border-radius: 8px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
}

.form-container h1 {
  text-align: center;
  width: 100%;
}

.form-container form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-evenly;
  width: 100%;
}

.form-container form > div {
  width: 100%;
}

.formsets {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.empty-form {
  display: none;
}

.formset {
  padding: 1rem;
  border-radius: 8px;
  background: #444;
  width: 100%;
  position: relative;
}

.formset input,
.formset select {
  background: #333;
}

.formset:first-child {
  padding-top: 0;
}

.formset .formset__close-trigger {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}

.formset-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.site-footer {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 5rem 0 1rem;
}

.badge {
  padding: 0.15rem 0.75rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.badge--rfc {
  background: #ffd652;
  color: #211921;
}

a.badge--rfc {
  color: #211921;
}

.badge--w3c {
  background: #ffffff;
  color: #005a9c;
}

a.badge--w3c {
  color: #005a9c;
}

.badge--github {
  padding: 0;
}

.badge--github svg {
  width: 1.5rem;
  height: 1.5rem;
}

.info-box {
  background: #172554;
  color: #bfdbfe;
  border: 1px solid #1e3a8a;
  padding: 1rem;
  border-radius: 6px;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
}

.info-box a {
  color: #eff6ff;
  text-decoration: underline;
}

.info-box a:hover {
  color: #ddd;
}

.dangerous-form,
.dangerous-form .button-group {
  align-items: center;
  justify-content: center;
}

/* Page styles */

/* Homepage */
.homepage {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.homepage .logo {
  display: flex;
}

.homepage .logo .logo__star {
  align-self: flex-end;
  transform: translateY(-2px);
}

.homepage .schema-list {
  line-height: 2;
}

.homepage .schema {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.homepage .schema__badges {
  display: flex;
  align-items: center;
}

.homepage .schema__badges .badge {
  height: 1.5rem;
  min-width: 0;
}

/* Schema detail */
.schema-layout {
  display: grid;
  grid-template-columns: 17rem 1fr 17rem;
  grid-template-rows: auto 1fr;
}

.schema-layout .schema-layout__header {
  grid-column-start: span 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.schema-layout .header__info {
  background: #191919;
  border-bottom: 1px solid #444;
  border-top: 1px solid #444;
  color: var(--text-secondary);
  padding: 1rem 2rem;
  text-align: left;
  display: flex;
  gap: 1rem;
  width: 100%;
}

.schema-layout .schema-layout__nav {
  padding: 1rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.schema-layout hr {
  border-color: #444;
}

.schema-layout .schema-layout__nav a {
  color: inherit;
  font-weight: inherit;
}

.schema-layout .schema-layout__nav .nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.schema-layout .schema-layout__nav .nav-group li a {
  padding: 0.5rem;
  border-radius: 8px;
  margin: 0 -0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.schema-layout .schema-layout__nav .nav-group li a:hover,
.schema-layout .schema-layout__nav .nav-group li a.is-active {
  background: var(--primary-color);
  color: #fff;
}

.schema-layout .schema-layout__nav .nav-group .nav-group__section-header {
  padding-top: 0.5rem;
}

/* A nested nav-group */
.schema-layout .schema-layout__nav .nav-group .nav-group {
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.schema-layout .schema-layout__nav .nav-group .nav-group li a {
  padding: 0;
  background: none;
  padding-left: 1.85rem;
  font-size: 14px;
}

.schema-layout .schema-layout__nav .nav-group .nav-group li a:hover {
  text-decoration: underline;
}

.schema-layout .schema-layout__nav .nav-group-label {
  color: #999;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  margin-bottom: -0.75rem;
}

.schema-layout .schema-layout__content {
  background: #2a2a2a;
  border-left: 1px solid #444;
  border-right: 1px solid #444;
  overflow: hidden;
}

.schema-layout .schema-layout__content .external-readme-link {
  padding: 1rem;
}

.schema-layout .schema-layout__extra {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text-secondary);
}

.schema-layout .schema-layout__extra .badges {
  display: flex;
  flex-wrap: wrap;
}

.schema-layout .schema-layout__extra .detail-list,
.schema-layout .schema-layout__extra .detail-list li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.schema-layout .schema-layout__extra .detail-list .detail-list-item__label {
  font-size: 14px;
}

.schema-layout .schema-layout__extra .detail-list .detail-list-item__value {
  color: #fff;
}

.schema-ref-detail {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.schema-ref-detail h2 {
  color: #fff;
}

.schema-definition {
  overflow: auto;
}

.schema-definition .hljs {
  background: #000;
  border-radius: 6px;
  border: 1px solid #444;
  overflow: hidden;
  white-space: pre-wrap;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Account profile */
.account {
  margin: 1rem auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 60rem;
  width: 100%;
}

.account section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.account .schema-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.account .schema-list .schema {
  width: 100%;
  padding: 0.5rem 1rem;
  background: #333;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account .schema-list .schema .schema__action-group,
.account .schema-list .schema .schema__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.account .visibility-badge {
  display: inline-block;
  padding: 0.15rem 0.75rem;
  padding: 0.15rem 0.75rem;
  border-radius: 1rem;
  font-size: 14px;
}

.account .visibility-badge--published {
  background: var(--primary-color);
  color: #eee;
}

.account .visibility-badge--unpublished {
  background: #525252;
  color: #ddd;
}

.account .schema-list .schema .info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Schema management form */
.manage-schema {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* About page */
.about-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}