@use "./base";
@use "./variables.scss" as *;
@use "table";
@use "colors";

body {
  min-height: 100vh;
}

.popover dl,
.popover article {
  color: var(--foreground);
}

// The <a> link back up to content is the last child of the <li>
li[id^="user-content-fn-"] > * {
  &:is(blockquote):nth-last-child(2) {
    margin-bottom: $base-margin;
  }

  &:not(blockquote):nth-last-child(2) {
    margin-bottom: 0; // Don't have unnecessary space before the <li>
  }
}

// Ensure not too much margin before blockquote
li > blockquote:first-child {
  margin-top: $base-margin;
}

.footnotes {
  & ul {
    margin-top: calc(2 * $base-margin);
  }

  // Footnotes narrower than normal lists, also even
  & > ol {
    padding-left: calc(0.5 * $list-padding-left);
    padding-right: calc(0.5 * $list-padding-left);
  }

  & li {
    max-width: 100%;
  }

  // Ordered lists in footnotes should start at 1, 2, 3, etc.
  & > li > ol {
    counter-reset: list;

    & li {
      counter-increment: list;

      &::marker {
        content: counter(list) ".";
      }
    }
  }
}

// Ensure that last ol of a li has no bottom margin
li[id^="user-content-fn-"] {
  & > ol {
    margin-bottom: 0;
  }

  & > p:last-child > a[class*="footnote-backref"]:last-child,
  & > a[class*="footnote-backref"]:last-child {
    display: inline-block; // Show the last backref
    color: color-mix(in srgb, var(--color-link) 70%, transparent);
    text-decoration: none;
    background-color: transparent;
    font-family: DejaVuSerifCondensed-Bold, serif;
    vertical-align: top;
  }
}

a[id*="fnref-"] {
  // When scrolling back to a footnote, scroll up farther than default
  scroll-margin-top: calc(2 * $base-margin);

  // Footnotes should be a bit easier to see
  background-color: color-mix(in srgb, gray 10%, transparent);
  padding: 0 0.1rem;
  border-radius: 5px;

  @media all and (max-width: $max-mobile-width) {
    scroll-margin-top: calc(7 * $base-margin);
  }
}

dd > ul:first-child,
dd > ol:first-child {
  margin-top: 0;
}

dd {
  margin-top: calc(0.5 * $base-margin);
  margin-left: $list-padding-left;
  margin-bottom: calc(2 * $base-margin);
  word-wrap: break-word;

  & > p:first-child {
    margin-top: 0;
  }
}

ol,
ul {
  margin-bottom: calc(2 * $base-margin);

  dl & {
    margin-top: calc(0.5 * $base-margin);
  }

  & li::marker {
    color: var(--midground);
  }
}

ul {
  padding-left: $list-padding-left;
}

ol {
  // Ensure list items are spaced more than just line-height
  --li-margin-bottom: 4px;

  // Simulate the implicit padding-left of ul (the bullet isn't flush with the text)
  --li-padding-left: #{$base-margin * 0.5};

  padding-left: $list-padding-left;

  // This comes in an h2 right before the footnotes.
  & .footnote-label {
    counter-reset: footnote;
  }

  & > li {
    counter-increment: list; // Increment the list counter for each list item
    margin-bottom: var(--li-margin-bottom);
    padding-left: var(--li-padding-left);

    // If in safari, use the marker to display the list counter
    @supports (-webkit-hyphens: none) {
      :not(#toc-content, #toc-content-mobile, .footnotes) & {
        padding-left: 0; // Safari effectively has extra padding-left
        margin-left: calc(
          0.5 * $base-margin
        ); // Somehow margin-left is better than padding-left here
      }
    }

    &::marker {
      font-variant-numeric: lining-nums; // Use lining numbers for list items
      content: counters(list, ".") "."; // Display the list counter with periods
    }

    // Nested lists
    & > ol {
      counter-reset: sublist; // Each nested ordered list has its own sublist counter
      margin-bottom: 0;
      margin-top: 0;

      li {
        counter-increment: sublist; // Increment the sublist counter for nested list items
        &::marker {
          content: counters(list, ".") "." counters(sublist, "."); // Display combined list and sublist counters for nested list items
        }

        &:first-child {
          margin-top: var(--li-margin-bottom); // Remove top margin from the first nested list item
        }
      }
    }
  }

  & li[id^="user-content-fn-"] {
    counter-increment: footnote; // Increment the footnote counter for each matching li
    margin-bottom: $base-margin; // Add a bottom margin to the list items

    // Make the backref arrows look nice
    & .data-footnote-backref {
      color: color-mix(in srgb, var(--color-link) 70%, transparent);
      text-decoration: none;
      background-color: transparent;
      font-family: DejaVuSerifCondensed-Bold, serif;
      vertical-align: top;
    }

    & p:first-child {
      margin-top: 0; // Remove top margin from the first paragraph in the footnote
    }

    & p:last-child {
      margin-bottom: 0; // Remove top margin from the first paragraph in the footnote
    }

    &::marker {
      margin-left: calc(-0.25 * $base-margin);
      vertical-align: baseline;
      font-size: var(--font-size-plus-0);
      content: counter(footnote) "."; // Display the counter followed by a period
    }

    & > figure {
      display: inline; // Else it's misaligned with top of table
    }

    .footnotes & {
      width: 100%; // Helps orient e.g. tables in footnotes
    }
  }
}

// Adjust spacing around lists
p:has(+ ol),
p:has(+ ul) {
  margin-bottom: 0;
}

/* Wrap links properly */
a {
  white-space: normal;
  word-break: break-word;
  margin-top: 0;
  text-underline-offset: 2.5px; // Default underline too close to text

  // Don't have anchor links with box behind them
  &[role="anchor"] {
    background-color: transparent;
  }

  &[id^="user-content-fnref-"] {
    text-decoration: none;
  }
}

.footnotes ul,
.footnotes ol {
  margin-top: $base-margin;
}

audio {
  width: 85%;
}

// Partially blends audio player with background
[data-theme="dark"] audio {
  mix-blend-mode: luminosity;
}

sup {
  line-height: 0; // Don't push other lines away
}

#trout-ornament-container {
  align-items: center;
  display: flex;
  justify-content: center;

  & > span {
    vertical-align: middle;
    font-family: "EBGaramond12", serif;
    font-size: 3rem;
    filter: saturate(90%);
    color: var(--blue);
    opacity: light-dark(0.6, 0.7);
  }

  // Left text flourish
  & > span:first-of-type {
    margin-right: calc(0.75 * $base-margin);
  }

  // Trout ornament
  & > img {
    width: calc(6 * $base-margin);
    margin-top: calc(2 * $base-margin);
    margin-bottom: calc(2 * $base-margin);
    filter: light-dark(none, invert(66%)) !important;
    opacity: light-dark(0.5, 1);
  }

  // Right text flourish
  & > span:last-of-type {
    margin-left: calc($base-margin);
  }
}

// Dark <-> Light
.temporary-transition *,
.temporary-transition .mermaid *,
.temporary-transition *::-webkit-scrollbar,
.temporary-transition *::-webkit-media-controls,
.temporary-transition *::-webkit-media-controls-play-button,
.temporary-transition *::-webkit-media-controls-panel,
.temporary-transition #left-sidebar {
  transition:
    color 1s ease-in-out,
    background-color 1s ease-in-out,
    border-color 1s ease-in-out,
    fill 1s ease-in-out,
    stroke 1s ease-in-out,
    box-shadow 1s ease-in-out,
    text-decoration-color 1s ease-in-out,
    filter 1s ease-in-out,
    scrollbar-color 1s ease-in-out !important;
}

.video-container {
  position: relative;
}

.video-container > .vsc-controller {
  position: absolute !important; /* remove from flow */
  inset: 0; /* stretch over the whole video */
  pointer-events: none; /* keep clicks for the extension if you prefer, otherwise remove */
  background: none !important; /* no extra paint */
  z-index: 100; // Ensure it's on top of the video but behind eg search-container
}

// Hide video speed controller
.vsc-controller:has(+ video.no-vsc),
// Sometimes there's an img between the video and the vsc-controller
.vsc-controller:has(+ * + video.no-vsc),
.vsc-controller:has(+ video[autoplay]) {
  display: none !important;
}

:root[data-theme="dark"] video,
:root[data-theme="dark"] img {
  &.favicon {
    filter: saturate(0%);
  }

  & .invert {
    filter: grayscale(50%) invert(100%) brightness(95%) hue-rotate(180deg);
  }
}

figure:has(> .subfigure) {
  display: flex;
  justify-content: center;
}

figure {
  margin: 0; // Use maximal space
}

.subfigure {
  margin: $base-margin;
}

figure,
.subfigure {
  flex: 1 1 0px;

  & img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  // IDK why but there can be an empty p between the figure and the next element
  & + figure,
  & + p:empty + figure {
    margin-top: calc(3 * $base-margin);
  }
}

#article-title,
.page-listing-title {
  font-variant-numeric: lining-nums;
}

#article-title {
  margin: calc(4 * $base-margin) 0 0;

  @media all and (max-width: $max-mobile-width) {
    margin-top: $base-margin;
  }

  .popover & {
    margin-top: calc(1.5 * $base-margin) !important;
  }
}

#article-title:has(+ .subtitle),
h1:has(+ .subtitle),
h2:has(+ .subtitle),
h3:has(+ .subtitle),
h4:has(+ .subtitle),
h5:has(+ .subtitle),
h6:has(+ .subtitle),
p:has(+ .subtitle),
.admonition-title:not(.is-collapsed *):has(+ .admonition-content > .subtitle) {
  margin-bottom: 0;
}

.subtitle {
  color: var(--midground);
  margin-top: calc(0.25 * $base-margin);
  font-size: var(--font-size-minus-1);

  & .favicon {
    // Smaller favicon for smaller font
    --favicon-size: calc(var(--font-size-minus-1) * 0.65);

    width: var(--favicon-size);
    height: var(--favicon-size);
  }

  .admonition & {
    color: color-mix(in srgb, var(--midground) 60%, var(--color));

    & a {
      color: inherit;
    }
  }
}

figure > img {
  z-index: -1;
}

figcaption {
  margin-top: calc(0.5 * $base-margin);
  position: relative;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

img,
figcaption,
.float-right {
  text-align: center;
  color: var(--midground-strong);
  font-size: var(--font-size-minus-1); /* smaller than the surrounding text */
}

.float-right {
  margin: calc(1.5 * $base-margin) 0 calc(1.5 * $base-margin) calc(3 * $base-margin);

  & img,
  img.float-right {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  float: right;
  max-width: 45%;
}

.no-select {
  -webkit-user-drag: none;
  user-select: none;
}

.favicon-span {
  white-space: nowrap;
}

img.favicon {
  display: inline;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: auto;
  vertical-align: 10%;
  filter: saturate(0%);
  margin-bottom: -0.07em;
  margin-top: -20%;
  mix-blend-mode: normal;
  cursor: text;

  // Don't pollute copied text with favicon
  user-select: none;

  // Make favicons align properly with headings
  h1 &,
  h2 &,
  h3 &,
  h4 &,
  h5 &,
  h6 & {
    vertical-align: 65%;
  }

  &.close-text {
    margin-left: 0.05rem;
  }

  &[src$="cladlab_nd_edu.avif"] {
    filter: invert(90%);
  }

  // These are really dark by default so we make them match var(--foreground)
  &[src$="mail.svg"],
  &[src$="readthesequences_com.avif"] {
    // Computed to match var(--foreground) using https://codepen.io/sosuke/pen/Pjoqqp
    filter: invert(27%);

    :root[data-theme="dark"] & {
      filter: invert(91%) sepia(6%) hue-rotate(185deg) contrast(92%);
    }
  }

  &[src$="mail.svg"] {
    margin-left: 0.05rem;
  }

  &[src$="forum_effectivealtruism_org.avif"] {
    filter: saturate(0%) invert(100%) sepia(100%) hue-rotate(185deg) contrast(100%);
  }

  :root[data-theme="dark"] &[src$="opentimestamps_org.avif"] {
    filter: saturate(0%) invert(80%) sepia(6%) hue-rotate(185deg) contrast(92%);
  }

  // Make the anchor icon less bright on dark mode
  &[src$="anchor.svg"] {
    // Rotate the anchor so that it resembles the trout within-site icon
    // also flip it horizontally
    transform: rotate(-90deg) scaleX(-1) scale(1.2);
    filter: invert(27%);

    :root[data-theme="dark"] & {
      filter: invert(80%) sepia(6%) hue-rotate(185deg) contrast(92%);
    }
  }

  &[src$="gwern_net.avif"] {
    :root[data-theme="light"] & {
      filter: invert(100%);
      mix-blend-mode: multiply;
    }
  }

  // Make it less searingly bright on dark mode
  &[src$="wikipedia_org.avif"] {
    :root[data-theme="dark"] & {
      filter: contrast(75%);
    }
  }

  // Very dark by default
  &[src$="github_com.avif"] {
    :root[data-theme="light"] & {
      filter: invert(25%);
    }

    :root[data-theme="dark"] & {
      filter: invert(75%) sepia(6%) hue-rotate(185deg) contrast(92%);
    }
  }

  // Make logos white on dark mode
  &[src$="nips_cc.avif"],
  &[src$="matsprogram_org.avif"],
  &[src$="proceedings_mlr_press.avif"] {
    :root[data-theme="dark"] & {
      filter: invert(100%) grayscale(100%);
    }
  }

  &[src$="arbital_com.avif"],
  &[src$="aaai_org.avif"] {
    :root[data-theme="light"] & {
      filter: brightness(0.3);
    }
  }

  // Gray logos made white on dark mode
  &[src$="alignmentforum_org.avif"],
  &[src$="ai-alignment_com.avif"] {
    :root[data-theme="dark"] & {
      filter: brightness(3); // Make it brighter
    }
  }

  &[src$="turntrout-favicons/favicon.ico"] {
    :root[data-theme="light"] & {
      filter: contrast(15%);
    }

    :root[data-theme="dark"] & {
      filter: invert(91%) sepia(6%) hue-rotate(185deg) brightness() contrast(50%);
    }
  }
}

.book-citation {
  font-style: italic;
}

.collapsible {
  & .collapsible-title {
    display: flex;

    & h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  & .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
}

svg.fold-icon {
  --icon-size: 18px;

  display: inline-flex; /* Use inline-flex for better alignment */
  align-items: center;
  justify-content: center;
  margin: 0;
  margin-left: calc(0.5 * $base-margin);
  margin-top: 0.25rem;
  cursor: pointer;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--midground); /* Set the default color here */
  transition: transform 0.2s ease-out; /* Add a smooth transition */
  transform: rotate(-90deg); /* Initial 90-degree rotation */

  &[aria-expanded="true"] {
    transform: rotate(0deg); /* Rotate 180 degrees when expanded */
  }
}

hr {
  max-width: 97.5%; // Looks weird if it extends all the way to the right
  margin: calc(3 * $base-margin) 0;
  margin-left: auto;
  margin-right: auto;
}

.right {
  & h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  li {
    // Don't make popover text gray
    &:not(* .popover-inner *) {
      color: var(--midground);
    }
  }

  & #content-meta {
    font-size: var(--font-size-minus-1);
    margin-bottom: 0;
  }
}

.authors {
  & p {
    color: var(--midground);
    margin-top: 0;

    & a {
      color: inherit;
    }

    &:not(:last-child) {
      margin-bottom: 0;
    }
  }

  & .publication-str {
    font-variant-numeric: lining-nums;
  }
}

img,
video {
  width: 100%;
  height: auto; // override manual heights
  max-width: 100%;
  margin-bottom: calc(2 * $base-margin);
  margin-top: $base-margin;

  article > p &,
  article > &,
  article > figure &,
  .video-container &,
  figure > & {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

// don't apply in fullscreen (backdrop)
[data-theme="light"] img,
[data-theme="light"] video:not(:has(::backdrop)) {
  mix-blend-mode: multiply;
}

img {
  margin-top: $base-margin;

  &.inline-img {
    display: inline;
    width: 0.9rem;
    vertical-align: middle;
    margin: 0;
    margin-left: 0.05rem;
    margin-right: 0.025rem;
    margin-bottom: 0.1rem;
  }
}

// Ordering the z stacks
#left-sidebar {
  z-index: 1;
  background-color: var(--background);

  &:has(#navbar.hide-above-screen) {
    background-color: transparent;
  }
}

svg {
  margin-bottom: $base-margin;
}

body.no-mix-blend-mode {
  & img,
  & video,
  & svg {
    mix-blend-mode: normal;
  }

  & #search-layout {
    [data-theme="light"] & img:not([src$=".svg"]),
    [data-theme="light"] & video {
      mix-blend-mode: multiply;
    }
  }
}

p > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.emoji,
.theme-emoji {
  mix-blend-mode: normal !important;
}

img.emoji {
  display: inline;
  border-radius: 0; // Don't want to cut off corners
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}

.theme-emoji {
  width: 100px;
  max-width: 100px;
  height: 100px;
  max-height: 100px;
  margin-top: 1rem;
}

.sequence-links {
  margin-bottom: calc(2 * $base-margin);
}

.sequence-links-divider {
  color: var(--midground-faint);
  height: calc(8 * $base-margin);
  margin-top: calc(2 * $base-margin);
  margin-left: $base-margin;
  margin-right: $base-margin;
  border-left-style: solid;
  border-left-width: 1px;
}

.sequence-links-post-navigation {
  width: 45%;
}

.sequence-nav {
  display: flex;
  justify-content: space-between;

  & a {
    flex: 0 0 auto;
  }

  & .prev-post {
    margin-right: auto;
  }

  & .next-post {
    margin-left: auto;
  }
}

// Fixing issue where eqn numbers overlap with katex math
//  https://github.com/KaTeX/KaTeX/issues/3066
.katex-html {
  .base {
    margin: 0 auto;
  }
}

// For some reason, the last one messes up katex sub on safari (eg https://turntrout.com/statistics-of-a-maze-solving-network#statistically-informed-impressions)
.vlist-r:last-of-type {
  display: none;
}

.katex-display .katex {
  padding-top: 1px; // Prevent exponents from clipping
}

.katex-html:has(span.tag) {
  display: flex !important;
}

.katex-display > .katex > .katex-html > .tag {
  position: relative !important;
  float: right;
  margin-left: 0.25rem;
}

// Spoilers (remark-spoiler)
.spoiler-container {
  position: relative;
  cursor: pointer;
  width: fit-content;
}

.spoiler-overlay {
  position: absolute;
  height: 90%; // Visually center the overlay
  width: 100%;
  color: var(--foreground);
  display: flex;
  align-items: center;
  justify-content: center;

  &::after {
    content: "Hover to show";
  }

  @media (max-width: $tablet-breakpoint) {
    &::after {
      content: "Tap to show";
    }
  }
}

.spoiler-content {
  filter: blur(4px);
  opacity: 0.5;

  // Safari needs this
  & > * {
    filter: inherit;
    opacity: inherit;
  }
}

.spoiler-container:hover .spoiler-overlay,
.spoiler-container:focus .spoiler-overlay,
.spoiler-container.revealed .spoiler-overlay {
  opacity: 0;
  pointer-events: none;
}

.spoiler-container:hover .spoiler-content,
.spoiler-container:focus .spoiler-content,
.spoiler-container.revealed .spoiler-content {
  filter: blur(0);
  opacity: 1;
}

// Make sure the bullet points don't feel choked
#center-content li,
.popover-inner li {
  margin-bottom: calc(0.5 * $base-margin);
}

/* Mermaid styles */
/* stylelint-disable selector-class-pattern */
.edgeLabel > div,
.edgeLabel > p {
  align-items: baseline !important;
  background-color: var(--midground-faintest) !important;
  padding: calc(0.5 * $base-margin);
  border-radius: 5px;
}

.flowchart {
  display: block !important; // Allows the diagram to be centered
  margin-left: auto;
  margin-right: auto;
}

.cluster {
  & rect {
    transform: translateY(calc(-0.5 * $base-margin));
  }

  & .cluster-label {
    text-decoration: underline; // Bolding makes the width too small
  }
}

// Ensure the point ends of arrows are the same color as the edges
[id$="flowchart-v2-pointEnd"] {
  fill: var(--midground-faint) !important;
}

// Edge labels  - TODO not working on safari
.edgeLabel > .label > foreignObject > div {
  background-color: transparent !important;
  padding: 0 !important;

  &:has(.edgeLabel:empty) {
    display: none !important;
    background-color: transparent !important;
  }
}

#mermaid-0,
#mermaid-1,
#mermaid-2 {
  font-size: 14px !important;

  & span,
  & .label {
    color: var(--foreground) !important;
    fill: var(--foreground) !important;
  }
}

#mermaid-1 {
  // Needed to ensure arrowheads are visible
  fill: var(--midground-faint) !important;
}

.flowchart-link {
  stroke: var(--midground-faint) !important;
}

foreignObject > div {
  display: block !important; // "table-cell" default is not centered
}

.edgeLabel > div,
.flowchart p,
.flowchart .katex,
foreignObject {
  overflow: visible !important;
}

// stylelint-
.flowchart .nodeLabel,
.flowchart .label,
.flowchart .edgeLabel {
  & .katex {
    margin-left: 0.25em;
  }
}

.flowchart .katex {
  margin-left: 0.375em;
  margin-right: 0.375em;
}
/* stylelint-enable selector-class-pattern */

.manifold-embed {
  position: relative;
  width: 100%;
  height: 18rem;
  max-width: 35rem;
  border-radius: 5px;
}

.after-article-components {
  margin-bottom: calc(2 * $base-margin);
  margin-top: calc(2 * $base-margin);

  & p {
    margin-bottom: $base-margin; // Less separation than usual
  }
}

#subscription-and-contact {
  border-radius: 5px;
  border: 1px solid var(--midground);
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.centered {
  text-align: center;
}

iframe {
  border: none;
  width: 95%;
  border-radius: 5px;
  margin-top: calc(2 * $base-margin);
  margin-bottom: calc(2 * $base-margin);
}

.right-arrow,
.monospace-arrow {
  vertical-align: bottom;
}

// EG ← looks better in FiraCode
.monospace-arrow {
  font-family: var(--font-monospace);
  font-weight: 200;
}

// Specific graph in design doc has too much whitespace in light
:root[data-theme="light"] {
  .compression-ratio-graph {
    margin-bottom: -0.25rem;
  }
}

#emoji-comparison-figure {
  & div {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
  }

  & img {
    width: min(100px, 12vw);
    aspect-ratio: 1;
    object-fit: contain;
    margin: 0 auto;
  }

  & .subfigure {
    display: flex;
    flex-direction: column;
    flex: 1 0 calc(15%);
    align-items: center;
  }
}

.light-svg {
  :root[data-theme="light"] & {
    filter: invert(35%); // Lighten to match the text color
  }

  // Use a lighter color in dark mode
  :root[data-theme="dark"] & {
    filter: invert(75%);
  }
}

// These transparent images need a background color to have visible text
.transparent-image {
  :root[data-theme="dark"] & {
    background-color: var(--foreground);
  }
}

.mirix-subscript {
  vertical-align: calc(-0.25 * $base-margin);
  line-height: 100%; // Prevent the lines from being more spaced
}
