/* Yesian's website: a dark terminal. This file is all the styling the public
   pages load (the framework's stylesheets are not used there), so it sets
   everything it needs itself. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --y-bg: #232627;
  --y-panel: #1c1c1c;
  --y-text: #1abc9c;
  --y-link: #1d99f3;
  --y-hot: #ffcb6b;
  --y-font: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}

body.site {
  margin: 0;
  background: var(--y-bg);
  color: var(--y-text);
  font-family: var(--y-font);
  font-weight: 400;
  overflow-wrap: break-word;
}

/* Text for screen readers and search engines only (the terminal's contents as plain text). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hidden text must not make the browser fetch the bold font. */
.visually-hidden * {
  font-weight: 400;
}

/* A page: the column, and a panel on the right (under it on a small screen). */
body.site > main.site-page {
  display: flex;
  margin: 2rem;
  padding: 0;
  font-size: 1rem;
}

.site-page > .pane {
  width: 80%;
  max-height: calc(100svh - 4rem);
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-color: var(--y-panel) var(--y-bg);
}

.site-page > aside {
  position: fixed;
  top: 0;
  right: 0;
  box-sizing: content-box;
  width: 15%;
  height: calc(100% - 4rem);
  padding: 2rem;
  background: var(--y-panel);
  font-size: 0.85rem;
}

.site-page > aside small {
  display: block;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  margin-top: 2rem;
  color: inherit;
  font-size: smaller;
}

.site-page a {
  color: var(--y-link);
  text-decoration: none;
}

.site-page a:hover {
  color: var(--y-hot);
}

/* The terminal (home). */
.site-page:has(#terminal) {
  font-size: 1.5rem;
}

.site-page > aside.term-help {
  font-size: 1rem;
}

.site-page p {
  margin: 0.25rem;
}

.site-page span {
  word-wrap: break-word;
}

/* A command to click, and the "enter" button on a phone. */
.site-page pre,
.term-help button {
  display: inline-flex;
  margin: 0.3rem 0.4rem;
  padding: 0.25rem 0.5rem;
  overflow: visible;
  border: 1px solid #898989;
  border-radius: 0.25rem;
  background: #4d4d4d;
  color: var(--y-hot);
  font-family: monospace; /* the browser's own, as on the old site */
  font-size: smaller;
  line-height: inherit;
  white-space: pre;
  cursor: pointer;
}

.site-page pre:hover,
.term-help button:hover {
  color: var(--y-link);
}

.term-help button {
  width: auto;
  font-family: system-ui, sans-serif; /* a button's own font and line height, as on the old site */
  line-height: normal;
  border-color: #2d2d2d;
  background: #0c0c0c;
  color: var(--y-text);
}

#terminal pre {
  margin: 0.4rem 0;
}

.path {
  color: var(--y-link);
}

#cursor {
  display: inline-block;
  width: 10px;
  height: 1.2rem;
  animation: y-blink 1s steps(1, start) infinite;
}

.desktop {
  display: block;
}

.mobile {
  display: none;
}

.result {
  color: var(--y-hot);
}

.err {
  color: #ff6b6b;
}

.site-page a.ext-link {
  margin-right: 0.5rem;
  color: var(--y-hot);
}

.site-page a.ext-link:hover {
  color: var(--y-link);
}

@keyframes y-blink {
  0%, 100% { background-color: var(--y-hot); }
  50% { background-color: transparent; }
}

/* The extensions' pages. */
.prose-term :is(h1, h2) {
  line-height: normal;
}

.prose-term h1 {
  margin: 0 0 1.5rem;
  color: inherit;
  font-size: 1.5rem;
  font-weight: 700;
}

.prose-term h2 {
  margin: 1.5rem 0 0.5rem;
  color: var(--y-hot);
  font-size: 1.1rem;
  font-weight: 700;
}

.prose-term p {
  margin: 0.5rem 0;
  line-height: 1.6;
}

.prose-term ul {
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}

.prose-term ul li {
  margin: 0;
  padding: 0.2rem 0;
  line-height: 1.6;
  list-style: none;
}

.prose-term ul li::before {
  content: "\2022  ";
  color: var(--y-hot);
}

.meta-label {
  color: var(--y-hot);
}

.meta-item {
  margin: 0.4rem 0;
}

.site-page a.back {
  display: inline-block;
  margin-bottom: 1rem;
}

.ext-icon {
  display: block;
  margin-bottom: 1rem;
}

/* The two dropdowns in the panel: which extension, which of its pages. */
.switcher {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.switcher-toggle {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  user-select: none;
}

.switcher-toggle:hover {
  background: none;
  color: inherit;
}

.switcher-arrow {
  display: inline-block;
  margin-left: 0.4rem;
  color: var(--y-link);
  font-size: 1.2rem;
  transition: transform 0.2s;
}

.switcher.open .switcher-arrow {
  transform: rotate(180deg);
}

.switcher-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 10;
  min-width: 140px;
  padding: 0.25rem 0;
  border: 1px solid #3d3d3d;
  border-radius: 0.25rem;
  background: #2a2d2e;
}

.switcher.open .switcher-dropdown {
  display: block;
}

.site-page .switcher-dropdown a {
  display: block;
  padding: 0.4rem 0.75rem;
  color: var(--y-text);
  font-size: 0.8rem;
}

.site-page .switcher-dropdown a:hover {
  background: #3d3d3d;
  color: var(--y-hot);
}

.site-page .switcher-dropdown a.active {
  color: var(--y-hot);
}

/* A wide screen: the page fills the window and only the column scrolls. */
@media (min-width: 1025px) {
  body.site {
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
  }

  body.site > main.site-page {
    flex: 1;
    min-height: 0;
  }

  .site-page > .pane {
    max-height: 100%;
  }
}

@media (max-width: 1024px) {
  body.site > main.site-page {
    flex-direction: column;
    margin: 1rem;
    font-size: 0.8rem;
  }

  .site-page > .pane {
    width: 100%;
    max-height: none;
  }

  .site-page > aside {
    position: relative;
    width: auto;
    height: auto;
    margin-top: 1rem;
    padding: 1rem;
    font-size: 0.7rem;
  }

  .site-page > aside small {
    position: static;
  }

  .site-page:has(#terminal) {
    justify-content: space-between;
    box-sizing: border-box;
    height: calc(100svh - 2rem - 1px);
    font-size: 0.85rem;
  }

  .site-page:has(#terminal) > .pane {
    max-height: calc(100svh - 16rem);
  }

  .site-page > aside.term-help {
    line-height: 0.4rem;
    font-size: 1rem;
  }

  .term-help button {
    margin-top: 0.4rem;
  }

  .site-page pre,
  .term-help button {
    padding: 0.4rem 0.5rem;
    font-size: small;
  }

  #cursor {
    width: 5px;
    height: 0.75rem;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .prose-term h1 {
    font-size: 1.1rem;
  }

  .prose-term h2 {
    font-size: 0.9rem;
  }
}