/*
 * #panes holds #tree and #content side by side and is the thing that scrolls horizontally
 * (scroll-snap-x) to reveal/hide the file tree, including via swipe. #tree and #scroll-area (inside
 * #content) each scroll themselves vertically, independently.
 */

:root {
  --accent-color: #DB4F44;
  --content-color: #1E2125;
  --nav-color: #141518;
  --nav-height: 42px;
  --link-color: #729FCF;
  --font-size: 16px;
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Helvetica Neue";
  font-size: var(--font-size);
  line-height: 150%;
  /* The reserved areas on iPhones use this background color. */
  background-color: var(--nav-color);
  color: #CACACA;
  /* In an iOS homescreen app, the layout viewport stops short of the curved bottom edge of the
   * screen, leaving a strip there that no element can occupy -- boxes below the viewport aren't
   * painted. Only the canvas is.
   *
   * The padding-bottom here is what covers that strip: it makes this element's box taller than the
   * viewport, while leaving its content box exactly one viewport tall. #panes
   * and everything under it size themselves to the content box, so they stay viewport-height and
   * anything positioned against them (e.g. #expand-buttons) stays on screen.
   *
   * box-sizing is stated explicitly because this strategy depends on it: if we used border-box, the
   * padding would be absorbed into the height rather than added to it. */
  box-sizing: content-box;
  height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

body {
  /* #panes is the only thing that scrolls at the body level, and it manages its own scrolling. */
  overflow: hidden;
}

button {
  font-size: var(--font-size);
  touch-action: manipulation; /* Disable double tap to zoom */
  /* Prevent a press-and-hold from selecting the text (and bringing up the selection callout). */
  user-select: none;
}

a {
  color: var(--link-color);
}

form#signin {
  text-align: center;
  font-size: 24px;
  line-height: 200%;
  width: 100%;
}

form#signin input[type=password] {
  font-size: 24px;
}
form#signin input[type=submit] {
  color: white;
  font-size: 24px;
  background-color: #444;
  border: 1px solid #888;
}

#panes {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  /* Add padding to clear the notch area, so that #content nav and #tree nav sit under the notch. */
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  /* "none" (instead of just "contain") also suppresses #panes' own rubber-band bounce past its
   * start/end. When #contents is in view, we don't want the user to be able to swipe left-to-right
   * to peek past it, because there's nothing to the right of it. */
  overscroll-behavior-x: none;
  /* Panes acts as a drawer that we swipe to right from. Don't show a scrollbar. */
  scrollbar-width: none;
}

#tree {
  display: flex;
  /* Give the tree 80% of the page width. The remaining 20% shows the file contents. Tapping on
   * the file contents will dismiss the tree. */
  flex: 0 0 80%;
  scroll-snap-align: start;
  box-sizing: border-box;
  background-color: var(--content-color);
  border-right: 2px solid #141518;

  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  flex-direction: column;
}

#tree nav[role=tablist] {
  display: flex;
  /* Without this, the buttons stretch (flexbox's default) to the full height of this nav. */
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  /* Ensure this nav maintains its height when #tree #root is taller than its flex container. */
  flex-shrink: 0;
  padding: 0 10px;
  background-color: var(--nav-color);
  /* This nav should be the same height as #content nav, and they should have the same borders. */
  height: var(--nav-height);
  border-bottom: 1px solid #101010;
}

#tree nav[role=tablist] button {
  flex: 1;
  border: 0;
  background-color: transparent;
  color: #888;
  padding: 6px;
  outline: 0;
}

#tree nav[role=tablist] button[aria-selected=true] {
  background-color: #33363B;
  color: white;
  border-radius: 4px;
}

#tree #root {
  box-sizing: border-box;
  padding-top: 0;
  padding-right: 10px;
  /* Use more bottom padding so the end of the file tree isn't obscured by the notch. */
  padding-bottom: 30px;
  padding-left: 10px;
  margin: 0;
}

#tree ul {
  padding-left: 20px;
  list-style-type: none;
}

#tree div {
  border-top: 1px solid #36383A;
  border-bottom: 1px solid #1b1b1b;
  padding: 10px;
  padding-left: 0;
  padding-right: 0;
  user-select: none;
  cursor: default;
}

#tree ul#root > li:first-of-type > div {
  border-top: none;
}

#tree ul#root > li:last-of-type > div {
  border-bottom: 1px solid #36383A;
}

#tree .arrow {
  float: right;
  margin-right: 10px;
}

#tree ul#root {
  list-style-type: none;
}

#tree li > ul {
  display: none;
}
#tree li[data-state=expanded] > ul {
  display: block;
}

/*
 * Content
 */

#content {
  cursor: default;
  position: relative;
  height: 100%;
  flex: 0 0 100%;
  /* Set a min-width (which defaults to auto) so that wide items, like a <pre> block or table, don't
     cause this pane to widen past the viewport. That would push #expand-buttons offscreen. */
  min-width: 0;
  scroll-snap-align: start;
}

#scroll-area {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#content nav {
  border-bottom: 1px solid #101010;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--nav-color);
  /* The nav needs to stay pinned to the top of #contents as #contents is scrolled, but needs to slide
     to the right with #contents when the file tree is shown. */
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  z-index: 2; /* This should be larger than the pin entry. */
  height: var(--nav-height);
}

button#top,
button#reload,
button#study {
  border: 0;
  width: 48px;
  height: 32px;
  background-color: #141518;
  border-right: 1px solid #1E2125;
  border-left: 1px solid #1E2125;
  outline: 0;
  color: var(--accent-color);
}

/* Currently unused. */
#placeholder {
  width: 32px;
  height: 32px;
}

#file-title {
  width: 100%;
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
  /* Truncate the width of files with extra long titles. */
  white-space: nowrap;
  overflow-x: hidden;
}

#file-contents {
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
  padding-left: 4px;
  /* This padding-right needs to accomodate the ellipsis markers in the margin, and the vertiacl
     scrollbar. */
  padding-right: 20px;
  background-color: var(--content-color);
  padding-bottom: 55px;
  /* Wrap long unbreakable strings like URLs rather than overflowing horizontally. */
  overflow-wrap: anywhere;
}

#expand-buttons {
  position: absolute;
  bottom: 25px;
  right: 20px;
}

#expand-buttons button,
#pin button {
  width: 45px;
  height: 45px;
  border-radius: 30px;
  border: 2px solid #ccc;

  background-color: rgba(30, 30, 30, 0.5);
  color: white;
  margin: 0 4px;
  outline: none;
  cursor: pointer;
}

/* Show a "..." after items which are expandable. */
#file-contents li[data-state=collapsed]:after,
#file-contents li[data-state=first-level]:after {
  top: 2px;
  margin-left: 5px;
  right: -8px;
  position: absolute;
  text-align: center;
  width: 1em;
  display: inline-block;
  color: #ccc;

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#file-contents li[data-state=collapsed]:after {
  content: "...";
}

#file-contents li[data-state=first-level]:after {
  content: "\f107";
  margin-top: 3px; /* So it has the same baseline as the ... character. */

  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  speak: none;
  text-decoration: inherit;
}

#file-contents li[data-state=collapsed] > * {
  display: none;
}
#file-contents li[data-state=collapsed] > p:first-of-type {
  display: block;
}
#file-contents li[data-state=collapsed] > a {
  display: inline;
}
#file-contents li[data-state=collapsed] > code {
  display: inline;
}

/* These ul+ol styles are maximizing display density. */
#file-contents ul,
#file-contents ol {
  padding-left: 18px;
  padding-top: 2px;
  padding-bottom: 2px;
}

#file-contents > ul,
#file-contents > ol {
  padding-left: 25px;
  margin-top: 8px;
  margin-bottom: 8px;
}

#file-contents ul {
  list-style-type: disc;
}

#file-contents #toc > ul {
  padding-left: 25px;
}

#file-contents li {
  padding-top: 4px;
  padding-bottom: 4px;
  position: relative;
}

/* markdown-it adds <p> tags in my list items that have blank lines before or after them.
   This is the "loose vs tight" list rule in the common mark spec. This results in too much margin
   compared to unordered lists. */
#file-contents ol li > p {
  margin: 0;
}

#file-contents ul p:first-of-type {
  margin: 0;
}

#file-contents h1,
#file-contents h2,
#file-contents h3,
#file-contents h4,
#file-contents h5 {
  font-weight: normal;
  line-height: 120%;
}

#file-contents code {
  /* This text takes up more space, so make it smaller to fit more without horizontal scrolling. */
  font-size: 14px;
}

#file-contents pre {
  /* Wrap long lines in code blocks rather than scrolling horizontally, for readability and because
     scrolling competes with the swipe gesture that reveals the file tree. */
  white-space: pre-wrap;
}

#pin {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  background-color: var(--content-color);
  z-index: 1;
  top: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#pin button {
  width: 70px;
  height: 70px;
  border-radius: 55px;
  font-size: 22px;
  margin: 7px;
  /* We draw our own press feedback (below) that's held for the duration of the touch, instead of
   * relying on iOS's default tap-highlight, which is faint against this button's dark background. */
  -webkit-tap-highlight-color: transparent;
}

#pin button:active {
  background-color: var(--link-color);
  /* rgba(255, 255, 255, 0.3);*/
}

#pin #pin-entry {
  margin: 0 auto;
  width: 240px;
  font-size: 130px;
  letter-spacing: 18px;
  text-align: left;
  line-height: 0;
}

#pin.wrong button {
  border-color: red;
}