@font-face {
  font-family: "Anime Ace 3";
  src: url("/assets/fonts/AnimeAce3BB-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Anime Ace 3";
  src: url("/assets/fonts/AnimeAce3BB-Italic.woff") format("woff");
  font-style: italic;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Anime Ace 3";
  src: url("/assets/fonts/AnimeAce3BB-BoldItalic.woff") format("woff");
  font-style: italic;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}

html {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

body {
  --browser-background: #ccc;
  --terminal-background: #1d2225;
  --editor-background: color-mix(in oklch, var(--terminal-background), var(--editor-color) 10%);
  --editor-color: white;
  --editor-font-family: monospace;
  --selection-transition-speed: 0.25s;
  --window-padding: 0.5rem;

  margin: 0;
  padding: 0;
}

/* :root {
  color-scheme: light dark;  
} */

.comicText {
  font-family: "Anime Ace 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.1;
  padding: 0.5rem;
  /* Anime Ace font seems to need more padding below in Safari. We try to strike
  a compromise across all browsers. */
  padding-bottom: 0.7rem;
  
  p {
    margin: 0;
  }

  /* strong = bold and italic */
  strong {
    font-style: italic;
  }

  /* Links in footnotes look just like text */
  a {
    text-decoration: none;
    color: inherit;
  }
}

.readMore {
  margin-bottom: 3rem;
}
comic-browser {
  background: var(--browser-background);
  display: grid;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  grid-template-rows: auto 1fr;
  overflow: hidden;

  .addressBar {
    align-items: center;
    color: black;
    display: grid;
    grid-template-columns: auto auto 1fr;
    padding: 0.5rem;
    white-space: nowrap;

    .icon {
      color: #555;
      height: 1.5rem;
      width: 1.5rem;
    }

    .addressInput {
      background: #f8f8f8;
      border: 1px solid transparent;
      box-sizing: border-box;
      margin-left: 0.5rem;
      overflow: hidden;
      padding: 0 0.25rem;
    }
  }

  .page {
    background: white;
    color: black;
    font-size: larger;
    overflow: scroll;

    button, input, select, textarea {
      font-family: inherit;
      font-size: inherit;
    }

    &:not(:has(.screenshot)) {
      padding: 1rem;
    }
    
    .screenshot {
      max-width: 100%;
    }

    :first-child:is(p, h1, h2, h3) {
      margin-top: 0;
    }
  }
}
comic-bubble {
  --bubble-border-color: black;
  --bubble-border-width: 2px;
  align-items: center;
  background: white;
  border: var(--bubble-border-width) solid var(--bubble-border-color);
  border-radius: 0.5rem;
  display: flex;
  position: relative;

  .tail {
    aspect-ratio: 1;
    background: white;
    border: var(--bubble-border-width) solid var(--bubble-border-color);
    box-sizing: border-box;
    height: 15px;
    left: var(--left-tail-shift);
    position: absolute;
    transform: rotate(45deg);
    right: var(--right-tail-shift);
    width: 15px;
  }

  .speech {
    background: white;
    border-radius: 0.5rem;
    box-sizing: content-box; /* Simplifies auto fit */
    /* Padding varies when we're capturing images, see panel.css */
    padding-left: var(--speech-padding, 0.5rem);
    padding-right: var(--speech-padding, 0.5rem);
    text-wrap: balance;
    z-index: 1;
  }
}

.no-js .speech {
  text-wrap: inherit;
}

.js-loading comic-bubble {
  visibility: hidden;
}
/*

    Name:       Base16 Oceanic Next Dark
    Author:     Dmitri Voronianski (http://pixelhunter.me)

    highlight.js v8.0 template by Jan T. Sott (https://github.com/idleberg/base16-highlight.js)
    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)

*/

/* Origami override */
.hljs {
  --text-color: #f0f0f0;
}

/* Oceanic Next Comment */
.hljs-comment,
.hljs-title {
  color: #A7ADBA;
}

.hljs-title {
  color: var(--text-color);
}

/* Oceanic Next Red */
.hljs-variable,
.hljs-attribute,
.hljs-attr, /* Origami addition */
.hljs-tag,
.hljs-regexp,
.ruby .hljs-constant,
.xml .hljs-tag .hljs-title,
.xml .hljs-pi,
.xml .hljs-doctype,
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
  color: #EC5f67;
}

/* Oceanic Next Orange */
.hljs-number,
.hljs-preprocessor,
.hljs-built_in,
.hljs-literal,
.hljs-params,
.hljs-constant {
  color: #F99157;
}

/* Oceanic Next Yellow */
.ruby .hljs-class .hljs-title,
.css .hljs-rules .hljs-attribute {
  color: #FAC863;
}

/* Oceanic Next Green */
.hljs-string,
.hljs-value,
.hljs-inheritance,
.hljs-header,
.hljs-section, /* Origami addition */
.ruby .hljs-symbol,
.xml .hljs-cdata {
  color: #99C794;
}

/* Oceanic Next Aqua */
.css .hljs-hexcolor {
  color: #5FB3B3;
}

/* Oceanic Next Blue */
.hljs-function,
.python .hljs-decorator,
.python .hljs-title,
.ruby .hljs-function .hljs-title,
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
  color: #6699CC;
}

/* Oceanic Next Purple */
.hljs-keyword,
.hljs-meta, /* Origami addition */
.javascript .hljs-function {
  color: #C594C5;
}

.hljs {
  display: block;
  /* background: #1B2B34; */
  /* color: #C0C5CE; */
  color: var(--text-color);
  padding: 0.5em;
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.5;
}

/* Origami additions */
.language-console {
    color: #c9cdd6;

    .hljs-meta {
      color: #fac863;
      font-weight: bold;
    }

    .language-bash {
      color: var(--text-color);
      font-weight: bold;
    
      .hljs-string {
        color: inherit;
      }
    }
}
comic-editor {
  background: var(--terminal-background);
  color: var(--editor-color);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;

  .tabBar {
    background: var(--editor-background);
    padding: var(--window-padding);
    padding-bottom: 0;
    
    .tab {
      background: var(--terminal-background);
      color: #FAC863;
      display: inline-block;
      padding: 0.5rem 1rem;
    } 
  }

  .editor {
    font-family: var(--editor-font-family);
    overflow: scroll;
    padding: var(--window-padding);

    pre {
      font-family: inherit;
      margin: 0;
    }

    /* mdHtml injects paragraph tags when comics are embedded in markdown */
    p {
      margin: 0;
      padding: 0;
    }

    .hljs {
      background: transparent;
      padding: 0;
    }
  }

  comic-terminal {
    border-top: 1px solid color-mix(in oklch, var(--terminal-background), white 25%);
  }
}
comic-graphic {
  background: black;
  color: white;
  display: grid;
  overflow: hidden;

  > * {
    opacity: 1;
    transition: opacity 0.5s;
  }

  &.hidden {
    > * {
      opacity: 0;
    }
  }

  > figure {
    margin: 0;
    overflow: hidden;
    
    svg {
      max-width: 100%;
      max-height: 100%;
    }
  }

  > pre {
    margin: 0;
  }
}
comic-panel {
  --border-color: #333;
  --border: 3px solid var(--border-color);
  /* Anime Ace font seems to need more padding below in Safari */
  --comic-text-padding: 0.5rem 0.5rem 0.7rem 0.6rem;
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  color: #333;
  display: grid;
  display: grid;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  grid-template-rows: auto 1fr;
  max-height: 90svh;
  max-width: 800px;
  overflow: hidden;
  position: relative;
  width: 100%;

  @media (prefers-color-scheme: dark) {
    --border-color: #666;
  }

  & > * {
    min-width: 0;
  }
  
  .faceCircle {
    aspect-ratio: 1; /* not sure why this is necessary height=width */
    background: #ccc;
    border: 2px solid black;
    border-radius: 50%;
    box-sizing: border-box;
    clip-path: circle();
    height: 64px;
    width: 64px;

    .faceContainer {
      border-radius: 50%;
      clip-path: circle();
      height: 60px;
      width: 60px;
      
      .face {
        position: relative;
        
        /* Adjustments for specific SVG positions */
        &[src*="alice"] {
          left: -9px;
          top: 3px;
          width: 84px;
        }
        
        &[src*="bob"] {
          left: -13px;
          top: 4px;
          width: 88px;
        }
      }
    }
  }

  .caption {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    padding: var(--caption-padding);

    &:has(comic-bubble) {
      padding-bottom: 0.5rem;
    }
  }

  /* Alternate left/right placement of face */
  &.even {
    --left-tail-shift: -5px;
    --right-tail-shift: inherit;

    &:has(.face) {
      .caption {
        padding-right: var(--extra-caption-padding, var(--caption-padding));
      }
    }
  }

  &.odd {
    --left-tail-shift: inherit;
    --right-tail-shift: -5px;

    &:has(.face) {
      .caption {
        flex-direction: row-reverse;
        padding-left: var(--extra-caption-padding, var(--caption-padding));
      }
    }
  }

  /* Face icon present */
  &:has(.face) {
    /* Set border on panel scene */
    & > .scene {
      border: var(--border);
    }
  }

  /* No face icon present */
  &:not(:has(.face)) {
    /* Set border on panel */
    border: var(--border);

    .caption {
      background: white;
      border-bottom: var(--border);
      box-sizing: border-box;  
      padding: var(--caption-padding);

      .speech {
        padding-bottom: 0.2rem;
      }
    }

    /* Set default background color based on specific scene */
    &:has(comic-graphic) {
      background: black;
    }
    &:has(comic-browser) {
      background: var(--browser-background);
    }
    &:has(comic-editor) {
      background: var(--editor-background);
    }
    &:has(comic-terminal) {
      background: var(--editor-background);
    }
  }

  .footnoteContainer {
    bottom: 1em;
    display: flex;
    flex-direction: row-reverse;
    left: 1em;
    position: absolute;
    right: 1em;

    &.left {
      flex-direction: row;
    }
    &.right {
      flex-direction: row-reverse;
    }

    .footnote {
      background: palegoldenrod;
      border: 1px solid #ccc;
      box-shadow: 4px 4px 6px rgba(0,0,0,0.4);
      box-sizing: content-box; /* Simplifies auto fit */
      font-style: italic;
      padding: var(--comic-text-padding);
      
      p {
        text-wrap: balance;
      }
      
      &.long {
        max-width: 50%;
      }
    }
  }
}

/* On narrow screens, make the scene taller */
@container (max-width: 500px) {
  comic-panel {
    aspect-ratio: inherit;
    max-height: none;

    > .scene {
      aspect-ratio: 3/4;
    }
  }
}

/*
Captured PNGs need spacing around the caption so that the balloon and face
circle don't end up touching the edge of the image. We want the horizontal width
of the paragraph inside the speech balloon to be the same in both modes so that
text doesn't wrap differently when captured.
*/
body:not(.capture) comic-panel:has(.face) {
  /* Normal mode */

  /* Caption not inset */
  --caption-padding: 0;
  
  /* 0.5 rem extra padding of caption on side opposite face circle */
  --extra-caption-padding: 0.5rem;
  
  /* 0.25 rem extra horizontal padding inside speech balloon */
  --speech-padding: 0.75rem;
}

body.capture comic-panel:has(.face) {
  /* Capture mode */

  /* Inset caption */
  --caption-padding: 0.5rem;

  /* No extra caption padding */

  /* Remove extra padding from inside speech balloon */
  --speech-padding: 0.5rem;
}

.js-loading .footnote {
  visibility: hidden;
}
comic-plain {
  padding: 1rem;

  img {
    max-width: 100%;
  }
}
comic-split {
  --pane-border: 1px solid color-mix(in oklch, var(--terminal-background), white 25%);
  background: var(--terminal-background);
  color: var(--editor-color);
  display: grid;
  overflow: hidden;

  &.horizontal {
    grid-auto-flow: row;
  }
  &.vertical {
    grid-auto-flow: column;
  }

  pre {
    margin: 0;
  }
  
  &.horizontal > *:not(:first-child) {
    border-top: var(--pane-border);
  }
  &.vertical > *:not(:first-child) {
    border-left: var(--pane-border);
  }
}

/* On narrow screens, vertical splits become horizontal ones */
@container (max-width: 500px) {
  comic-split {
    &.vertical {
      grid-auto-flow: row;

      & > *:not(:first-child) {
        border-left: none;
        border-top: var(--pane-border);
      }
    }
  }
}

comic-strip {
  container-type: inline-size;
  display: grid;
  gap: 3rem 0;
  padding: 3rem 0;
}
comic-terminal {
  background: var(--terminal-background);
  color: var(--editor-color);
  display: grid;
  font-family: var(--editor-font-family);
  grid-auto-rows: min-content;
  overflow: scroll;
  padding: var(--window-padding);
  
  comic-typewriter {
    .prefix {
      color: #FAC863;
      font-weight: bold;
      width: 2ch; /* Since we have to use grid */
    }

    .text {
      font-weight: bold;
    }
  }

  /* Hide second typewriter if the first has nothing to type */
  &:has(comic-typewriter:first-of-type.notyping) comic-typewriter:nth-of-type(2) {
    display: none;
  }

  pre {
    font-family: inherit;
    margin: 0;
    overflow: hidden;
  }

  &.typing {
    .output {
      display: none;
    }
  }

  &.typing,
  &.running {
    comic-typewriter:nth-of-type(2) {
      display: none;
    }
  }
}