/* <VARIABLES> */

:root {
  --font-family-monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  --background-color: #fff;
  --text-color-default: #333;

  --nav-link-color: var(--color-blue);
  --nav-background-color: #eee;
  --table-border-color: #ccc;
  --table-header-background-color: rgba(235, 235, 235, 0.5);
  --table-cell-padding: 0.5em;
  --table-cell-hover-color: #e5e5e5;
  --background-gradient-na: linear-gradient(
    45deg,
    var(--background-color) 25%,
    #eee 25%,
    #eee 50%,
    var(--background-color) 50%,
    var(--background-color) 75%,
    #eee 75%,
    #eee 100%
  );

  --color-red: #aa3731;
  --color-blue: #325cc0;
  --color-green: #448c27;
  --color-violet: #7a3e9d;
  --color-yellow: #fffabc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #342826;
    --text-color-default: #fff;

    --nav-link-color: var(--color-yellow);
    --nav-background-color: #333;
    --table-border-color: #444;
    --table-header-background-color: rgba(0, 0, 0, 0.2);
    --table-cell-hover-color: #303030;
    --background-gradient-na: linear-gradient(
      45deg,
      var(--background-color) 25%,
      #252525 25%,
      #252525 50%,
      var(--background-color) 50%,
      var(--background-color) 75%,
      #252525 75%,
      var(--table-header-background-color) 100%
    );

    --color-red: #ed4e5b;
    --color-blue: #325cc0;
    --color-green: #98c379;
    --color-violet: #dd79fb;
    --color-yellow: #fffabc;
  }
}

/* </VARIABLES> */

html {
  margin: 1em 1em 0 1em;
  padding-bottom: 5em;
}

body {
  background-color: var(--background-color);
  color: var(--text-color-default);
  font-family: var(--font-family-monospace);
  font-size: 18px;
}

h1 {
  font-weight: 300;
}

a:any-link {
  color: inherit;
  text-decoration: none;
}

.error-page a:any-link {
  color: var(--color-red);
}

.error-page a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--font-family-monospace);
  line-height: 0;
  white-space: pre;
}

/* <FOOTER> */

footer {
  background-color: var(--table-header-background-color);
  backdrop-filter: grayscale(0.5) blur(3px);
  border-top-right-radius: 10px;
  -webkit-backdrop-filter: grayscale(0.5) blur(3px);
  font-size: 80%;
  position: fixed;
  padding: .5em 2em;
  left: 0em;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 2em;
}

footer form {
  text-align: center;
  width: 125px;
}

footer .time {
  text-align: center;
  width: 125px;
}

footer .time time {
  opacity: 0;
  transition: opacity 150ms ease-in;
}

footer button {
  background: transparent;
  border: none;
  color: var(--text-color-default);
  cursor: pointer;
  font-family: var(--font-family-monospace);
}

footer button:hover {
  text-decoration: underline;
}

footer .num-vals-warning-soft {
  color: #e19c1d;
}

footer .num-vals-warning-heavy {
  color: var(--color-red);
}

footer nav {
  display: flex;
  gap: .5em;
  justify-content: space-between;
  width: 45px;
}

footer a:any-link {
  color: var(--color-blue);
  transition: color 250ms ease-in-out;
}

footer .noop {
  opacity: .25;
}

/* </FOOTER> */

/* <PARAGRAPH> */

pre {
  margin: 0;
  padding: 0;
}

pre + pre {
  margin-top: 1em;
}

p {
  margin: 0;
  padding: 0;
}

p + p {
  margin-top: 1em;
}

/* </PARAGRAPH> */

/* <TABLE> */

table {
  border-top: 1px solid var(--table-border-color);
  border-left: 1px solid var(--table-border-color);
  border-spacing: 0;
}

table th {
  font-weight: normal;
  text-align: left;
}

table th,
table td {
  padding: calc(var(--table-cell-padding) / 2) var(--table-cell-padding);
}

table td > table {
  margin-left: -.25em;
  margin-right: -.25em;
}

table td:empty:not(.filler) {
  cursor: not-allowed;
  background-image: var(--background-gradient-na);
  background-size: 9px 9px;
}

table tbody th {
  background-color: var(--table-header-background-color);
  border-right: 1px solid var(--table-border-color);
  text-align: right;
  vertical-align: top;
}

table tbody tr:last-of-type th,
table tbody tr:last-of-type .filler {
  border-bottom: 1px solid var(--table-border-color);
}

.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}

.sticky th {
  backdrop-filter: grayscale(0.5) blur(3px);
  -webkit-backdrop-filter: grayscale(0.5) blur(3px);
}

table thead th {
  background-color: var(--table-header-background-color);
  border-bottom: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  text-align: left;
}

table tbody td {
  background-color: var(--background-color);
  border-bottom: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  transition: background-color 250ms ease-in-out;
}

/* <EXPANDO/> */

[data-state = collapsed] tbody,
[data-state = collapsed] thead tr:nth-child(2),
[data-state = collapsed] tfoot,
[data-state = collapsed] .value-type {
  display: none;
}

[data-state = expanded] > thead > tr:first-child > .count {
  display: none;
}

/* </TABLE> */

.sticky .count {
  color: var(--color-violet);
  cursor: help;
  font-size: 80%;
}

th[data-action] {
  min-width: 15px;
}

[data-action = toggle-length] {
  cursor: pointer;
}

[data-action = toggle-level] {
  cursor: pointer;
  text-align: center;
  transition: background-color 250ms ease-in-out;
}

[data-action = toggle-level]:hover {
  background-color: var(--table-cell-hover-color);
  color: var(--color-blue);
}

.index {
  font-size: 80%;
  opacity: 0.8;
  text-align: center;
  vertical-align: middle;
  min-width: 15px;
  position: sticky;
  left: 0;
  z-index: 1;
}

.value-type {
  opacity: 0.8;
  vertical-align: middle;
  font-variant: small-caps;
}

.value-type a:any-link:hover, tfoot a:any-link:hover {
  text-decoration: underline;
}

.count {
  min-width: 15px;
  vertical-align: middle;
  text-align: center;
}

.filler {
  background-color: var(--table-header-background-color);
  border-right: none;
  border-bottom: none;
}

table tfoot th {
  background-color: var(--table-header-background-color);
  border-bottom: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  font-size: 75%;
  text-align: left;
  text-transform: uppercase;
}

table tfoot a:any-link:hover {
  text-decoration: underline;
}

/* <ANNOTATE> */

/*
Colors adapted from the Alabaster color scheme by Nikita Prokopov:

https://github.com/tonsky/sublime-scheme-alabaster
*/

.ann .var { color: var(--color-blue); }
.ann .keyword { color: var(--color-violet); }
.ann .number { color: var(--color-violet); }
.ann .string { color: var(--color-green); }
.ann .boolean { color: var(--color-violet); }
.ann .nil { color: var(--color-violet); }

.ann .dispatch,
.ann .metadata,
.ann .quote,
.ann .syntax-quote,
.ann .unquote {
  color: var(--color-red);
}

.ann .punctuation,
.ann .comma {
  opacity: 0.5;
}

.ann .comment {
  background-color: var(--color-yellow);
  color: #494732;
}

/* </ANNOTATE> */

/* <NOTIFICATIONS> */

.show {
  opacity: 1 !important;
}

.ok {
  position: fixed;
  top: .25em;
  right: .25em;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}

.event-source-error {
  display: flex;
  align-items: center;
  backdrop-filter: grayscale(0.5) blur(3px);
  -webkit-backdrop-filter: grayscale(0.5) blur(3px);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  pointer-events: none;
  width: 100vw;
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
  opacity: 0;
}

.event-source-error a {
  pointer-events: all;
}

.event-source-error a:hover {
  text-decoration: underline;
}

#pause {
  transition: 250ms filter ease-in-out;
}

.paused {
  filter: saturate(0%);
}

.paused:hover {
  filter: saturate(50%);
}

/* </NOTIFICATIONS> */
