@import url('https://cdn.jsdelivr.net/npm/@rhds/tokens@2/css/global.css');

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--rh-font-family-body-text);
  line-height: var(--rh-line-height-body-text);
  color: light-dark(var(--rh-color-text-primary-on-light), var(--rh-color-text-primary-on-dark));
  background: light-dark(var(--rh-color-surface-lightest), var(--rh-color-surface-darkest));
}

main, header {
  max-width: 72rem;
  margin: 0 auto;
}

main {
  padding: var(--rh-space-2xl);

  @media (max-width: 40rem) {
    padding: var(--rh-space-lg);
  }
}

header, h1 {
  display: flex;
  flex-flow: row wrap;
  gap: var(--rh-space-md);
}

header {
  h1 { margin-inline-end: auto; }
  rh-tag, img, > a {
    display: inline;
    align-self: center;
  }
  > a {
    display: block;
    height: 20px;
    color: currentcolor;
  }
  rh-subnav {
    width: 100%;
  }
}

a {
  color: light-dark(var(--rh-color-interactive-primary-default-on-light), var(--rh-color-interactive-primary-default-on-dark));

  &:hover {
    color: light-dark(var(--rh-color-interactive-primary-hover-on-light), var(--rh-color-interactive-primary-hover-on-dark));
  }
}

h1 {
  font-family: var(--rh-font-family-heading);
  margin-block-end: var(--rh-space-xs);
}

h1 + p {
  color: light-dark(var(--rh-color-text-secondary-on-light), var(--rh-color-text-secondary-on-dark));
  margin-block-end: var(--rh-space-lg);
}

h2 {
  font-family: var(--rh-font-family-heading);
  margin-block: var(--rh-space-2xl) var(--rh-space-lg);
  border-block-end: var(--rh-border-width-sm) solid light-dark(var(--rh-color-border-subtle-on-light), var(--rh-color-border-subtle-on-dark));
  padding-block-end: var(--rh-space-md);
}

h3 {
  margin-block-end: var(--rh-space-sm);
  font-size: var(--rh-font-size-body-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: light-dark(var(--rh-color-text-secondary-on-light), var(--rh-color-text-secondary-on-dark));
}

p {
  margin-block-end: var(--rh-space-md);
}

details {
  margin-block-start: var(--rh-space-xl);

  summary {
    cursor: pointer;
    color: light-dark(var(--rh-color-interactive-primary-default-on-light), var(--rh-color-interactive-primary-default-on-dark));
    font-weight: var(--rh-font-weight-heading-medium);
  }

  ul {
    margin-block-start: var(--rh-space-md);
  }
}

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rh-space-xl);

  @media (max-width: 50rem) {
    grid-template-columns: 1fr;
  }
}

.arch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rh-space-sm);
  align-items: center;
  justify-content: center;
  margin: var(--rh-space-xl) 0;
}

/* Editor layout */
.editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rh-space-lg);
  margin-block: var(--rh-space-lg);

  @media (max-width: 50rem) {
    grid-template-columns: 1fr;
  }
}

highlighted-textarea {
  min-height: 16rem;
}

pre {
  background: light-dark(var(--rh-color-surface-lighter), var(--rh-color-surface-darker));
  border: var(--rh-border-width-sm) solid light-dark(var(--rh-color-border-subtle-on-light), var(--rh-color-border-subtle-on-dark));
  border-radius: var(--rh-border-radius-default);
  padding: var(--rh-space-lg);
  overflow-x: auto;
  font-size: var(--rh-font-size-code-sm);
  line-height: var(--rh-line-height-code);
  white-space: pre-wrap;
  word-break: break-word;
  color: light-dark(var(--rh-color-text-primary-on-light), var(--rh-color-text-primary-on-dark));
}

code {
  font-family: var(--rh-font-family-code);
}

.preview {
  margin-block-start: var(--rh-space-lg);
  padding: var(--rh-space-xl);
  border: 2px dashed light-dark(var(--rh-color-border-subtle-on-light), var(--rh-color-border-subtle-on-dark));
  border-radius: var(--rh-border-radius-default);
  background: light-dark(var(--rh-color-surface-lightest), var(--rh-color-surface-darkest));
}

.timing {
  font-size: var(--rh-font-size-body-text-sm);
  color: light-dark(var(--rh-color-text-secondary-on-light), var(--rh-color-text-secondary-on-dark));
  margin-inline-start: var(--rh-space-md);
}

rh-code-block {
  margin-inline: auto;
}