@import "reset.css";
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

/* Carbon Gray 100 colours */

:root {
  /* Background */
  --layer-03: #393939; /* Gray 80 */
  --layer-02: #262626; /* Gray 90 */
  --layer-01: #161616; /* Gray 100 */
  --layer-00-5: #080808; /* "Gray 105" */
  --background: #000000; /* Black 100 */

  /* Buttons */
  --button-primary: #0f62fe; /* Blue 60 */
  --button-primary-hover: #0353e9; /* Blue 60 hover */
  --button-alternate: #ff832b; /* Orange 40 */
  --button-alternate-hover: #eb6200; /* Orange 50 */
  --button-text: #f4f4f4; /* Gray 10 */
  --button-alternate-text: #161616; /* Gray 100 */

  /* Border */
  --border-subtle-03: #8d8d8d; /* Gray 50 */
  --border-subtle-02: #6f6f6f; /* Gray 60 */
  --border-subtle-01: #525252; /* Gray 70 */
  --border-subtle-00: #393939; /* Gray 80 */
  --border-information: #6fdc8c; /* Green 30 */
  --border-error: #fa4d56; /* Red 50 */

  /* Text */
  --text-primary: #f4f4f4; /* Gray 10 */
  --text-secondary: #c6c6c6; /* Gray 30 */
  --link-primary: #ff832b; /* Orange 40 */
  --link-primary-hover: #eb6200; /* Orange 50 */
  --text-special: #f1c21b; /* Yellow 30 */
  --text-var: #6fdc8c; /* Green 30 */
}

@media (prefers-color-scheme: light) {
  :root {
    /* Background */
    --layer-03: #c6c6c6; /* Gray 30 */
    --layer-02: #e0e0e0; /* Gray 20 */
    --layer-01: #f4f4f4; /* Gray 10 */
    --layer-00-5: #f9f9f9; /* "Gray 5" */
    --background: #ffffff; /* White 100 */

    /* Buttons */
    --button-primary: #0f62fe; /* Blue 60 */
    --button-primary-hover: #0353e9; /* Blue 60 hover */
    --button-alternate: #eb6200; /* Orange 50 */
    --button-alternate-hover: #ff832b; /* Orange 40 */
    --button-text: #f4f4f4; /* Gray 10 */
    --button-alternate-text: #161616; /* Gray 100 */

    /* Border */
    --border-subtle-03: #8d8d8d; /* Gray 50 */
    --border-subtle-02: #6f6f6f; /* Gray 60 */
    --border-subtle-01: #525252; /* Gray 70 */
    --border-subtle-00: #393939; /* Gray 80 */
    --border-information: #24a148; /* Green 50 */
    --border-error: #fa4d56; /* Red 50 */

    /* Text */
    --text-primary: #161616; /* Gray 100 */
    --text-secondary: #525252; /* Gray 70 */
    --link-primary: #eb6200; /* Orange 50 */
    --link-primary-hover: #ff832b; /* Orange 40 */
    --text-special: #da1e28; /* Red 60 */
    --text-var: #24a148; /* Green 50 */
  }
}

* {
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* this becomes visible below the footer if the page is very short */
.page__html {
  background-color: var(--layer-01);
}

.page__body {
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  line-height: 1.3333;
  color: var(--text-primary);
  flex-direction: column;
}

/* a page__outer is full width and provides a background */
/* mobile first */
.page__outer {
  padding: .5rem;
}

blockquote {
  margin: 1rem .5rem;
}

@media (min-width: 30rem) {
  .page__outer {
    padding: 2rem;
  }

  blockquote {
    margin: 1rem 2rem;
  }
}

.page__outer--header {
  background-color: var(--layer-01);
  border-bottom: 1px solid var(--layer-03);
}

.page__outer--content {
  background-color: var(--background);
  border-bottom: 1px solid var(--layer-03);
}

.page__outer--comments {
  background-color: var(--layer-00-5);
  border-bottom: 1px solid var(--layer-03);
}

.page__outer--footer {
  background-color: var(--layer-01);
}

/* this narrows the actual content but not the background colour */
.page__wrapper {
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.page__h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 3rem;
}

.page__breadcrumbs {
  font-size: .8rem;
  color: var(--text-secondary);
}

.page__breadcrumb:after {
  content: " » ";
}

.page__h2 {
  font-size: 2rem;
  font-weight: 700;
}

.page__dateline {
  border-top: .0625rem solid var(--border-subtle-03);
  font-size: .8rem;
  color: var(--text-secondary);
}

.page__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.page__button-form {
  display: inline;
  border-width: 0;
  margin: 0;
  padding: 0;
}

.page__control-link {
  display: inline-block;
  padding: .5rem .75rem;
  background-color: var(--button-alternate);
  color: var(--button-alternate-text);
  line-height: 1rem;
}

.page__control-link:hover,
.page__control-link:active,
.page__control-link:focus {
  background-color: var(--button-alternate-hover);
  color: var(--button-alternate-text);
}

/* also used on page `re_en` */
.page__button {
  border: 0;
  font-size: 1em; /* avoid shrinkage */
  font-family: inherit;
  padding: .5rem .75rem;
  background-color: var(--button-primary);
  color: var(--button-text);
  cursor: pointer;
  line-height: 1rem;
  display: inline-block;
}

.page__button:hover,
.page__button:active,
.page__button:focus {
  background-color: var(--button-primary-hover);
  color: var(--button-text);
}

.page__content {}

.page__content > *:first-child {
  margin-top: 0;
}

.page__content > *:last-child {
  margin-bottom: 0;
}

.page__content h3 {
  margin: 2rem 0 1rem;
}

.page__content h4 {
  margin: 2rem 0 1rem;
}

.page__ancestors {
  text-align: right;
}

input[type=checkbox]:checked ~ .page--when-unchecked {
  display: none;
}

input[type=checkbox]:not(:checked) ~ .page--when-checked {
  display: none;
}

.page__comment {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page__comment:target {
  /* TODO */
}

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

.page__comment--hidden {
  opacity: .5;
}

.page__comment-h4--admin {
  color: var(--text-special);
}

.page__comment-content {
  white-space: pre-wrap;
}

.page__regular-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page__comments-no-more {
  font-style: italic;
}

.page__comment-input-name,
.page__comment-input-text,
.page__comment-input-sqrt,
.page__search-text {
  border: .0625rem solid var(--border-subtle-01);
  font-size: 1rem;
  font-family: inherit;
  font-weight: inherit;
  background-color: transparent;
  color: inherit;
}

.page__search-text {
  border-color: var(--border-subtle-00);
}

.page__search-text {
}

.page__comment-input-text {
  width: 100%;
}

.page__comment-submit-button {
  text-align: right;
}

.page__footer {
  display: flex;
  font-size: .8rem;
  flex-wrap: wrap;
  align-items: baseline;
  color: var(--text-secondary);
}

.page__footer-entry {
  margin-inline-end: 1rem;
}

.page__footer > *:last-child {
  margin-inline-end: 0;
}

.page__search-submit {
  display: none;
}

/* Globals... */

a {
  color: var(--link-primary);
  text-decoration: none;
  cursor: pointer; /* even if no href */
}

a:hover,
a:active,
a:focus {
  color: var(--link-primary-hover);
}

h3 {
  font-size: 1.25rem;
  font-weight: bold;
  border-bottom: .0625rem dotted var(--border-subtle-02);
}

h4 {
  font-weight: bold;
}

h5 {
  font-weight: bold;
  margin: 1rem 0;
}

p {
  margin: 1rem 0;
}

p.rant {
  font-weight: bold;
  font-size: 2rem;
}

blockquote > *:first-child {
  margin-top: 0;
}

blockquote > *:last-child {
  margin-bottom: 0;
}

hr {
  height: 0;
  border-width: 0;
  border-top: .0625rem dotted var(--border-subtle-02);
}

big {
  /* can be nested */
  font-size: 1.25em;
}

small {
  /* can be nested */
  font-size: .8em;
}

sup {
  font-size: .8em;
  vertical-align: super;
}

sub {
  font-size: .8em;
  vertical-align: sub;
}

var,
em,
i {
  font-style: italic;
}

i em,
em i {
  font-style: normal;
}

strong {
  font-weight: bold;
}

pre {
  overflow-x: scroll;
  font-family: consolas, courier new, monospace;
  background-color: var(--layer-03);
  padding: .2rem .4rem;
  border-radius: 6px;

  /* for `re_ar` */
  direction: ltr;
}

code,
tt,
kbd {
  font-family: consolas, courier new, monospace;
  background-color: var(--layer-03);
  padding: .15rem .3rem;
  border-radius: 6px;

  /* for `re_ar` */
  direction: ltr;
}

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

table {
  border-collapse: collapse;
  font-size: .8rem;

  /* extra-wide tables, you can just scroll to see */
  display: block;
  overflow: auto;
}

th {
  border: .0625rem solid var(--border-subtle-02);
  font-weight: bold;
  padding: .5rem;
}

td {
  border: .0625rem solid var(--border-subtle-02);
  padding: .5rem;
}

th > *:first-child,
td > *:first-child {
  margin-top: 0;
}

th > *:last-child,
td > *:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 1rem 0;
  padding-inline-start: 1.5rem;
}

ol {
  list-style-type: decimal;
}

ul {
  list-style-type: disc;
}

ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

dl {
  margin: 1rem 0 1rem 2rem;
}

dt {
  margin: 1rem 0;
  font-weight: bold;
}

dd {
  margin: 1rem 0;
}

/* Used in Ra */
.tworld {
  text-align: right;
}
.between {
  text-align: center;
}

/* Used on pages `re_en` */
.re__expr {
  color: var(--text-var);
}

.re__exercise {
  border: 1px solid var(--border-information);
  margin: 1em 0;
  padding: 1em;
}

.re__warning {
  border: 1px solid var(--border-error);
  margin: 1em 0;
  padding: 1em;
}

.re__exercise > :first-child,
.re__warning > :first-child {
  margin-top: 0;
}

.re__exercise > :last-child,
.re__warning > :last-child {
  margin-bottom: 0;
}