.page-container {
  --article-width: 50rem;
}

/* helpful: https://css-tricks.com/preventing-a-grid-blowout/ */
/**************/
/* CORE MODES */
/**************/
/* WIDTH */
[data-width=narrow] .page-container {
  --article-width: 50rem;
}

[data-width=narrow][data-sidebar=true] .page-container {
  --rel-left: 1;
  --rel-right: 1;
}

[data-width=wide] .page-container {
  --article-width: max(78rem,75vw);
}

[data-width=wide][data-sidebar=true] .page-container {
  --article-width: max(60vw,50rem);
  --rel-left: 0;
  --rel-right: 1;
}
[data-width=wide][data-sidebar=true] #side-details-wrap {
  max-width: unset;
}

/* experimental layout: show content horizontally */
[data-layout=h] .body-container > main #article-container {
  columns: 30rem auto;
  height: 88vh;
}

[data-layout=h] .body-container > main {
  overflow: scroll;
  margin-top: 1em;
}

/**************************/
/* CONDITIONAL COMPONENTS */
/**************************/
[data-sidebar=false] #side-details-wrap {
  display: none !important;
}

[data-sidebar=true] #sidenotes-right {
  display: none !important;
}

#content p, #content li {
  text-align: justify;
}

/************/
/* HEADINGS */
/************/
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  display: flex; /* to fix the border extension */
}

#content h1 {
  border-bottom: 1px solid;
}

#content h2 {
  border-bottom: 1px dotted;
  font-size: 1.4em;
}

#content h4,
#content h5,
#content h6 {
  font-style: italic;
}

#content h1 > code,
#content h2 > code,
#content h3 > code,
#content h4 > code,
#content h5 > code,
#content h6 > code {
  margin: 0 0.31em;
  top: -2px;
  position: relative;
  line-height: 1.4em;
}

/* title-like H1 elements */
header h1 {
  font-size: 2.2em;
  margin: 0.6em 0 0.3em 0;
}

h1 > a {
  text-decoration: none;
}

/***********/
/* ARTICLE */
/***********/
/* shift clickable anchors around header */
* {
  scroll-margin-top: 3.1em;
}

main article details {
  border: 1px solid var(--palette-accent-border-color);
}

/*******/
/* TOC */
/*******/
/* very frustrating getting proper TOC behavior in sidebar; sticky element needs to be in
 * main container, not nested in absolute positioned gutter. `.toc-track` provides a full
 * width track to then position the TOC element from the right edge of the article body;
 * else we have to deal with negative margin-left to pull the TOC left and possibly
 * variable size widths, which is nasty. `.toc` should then be positioned via absolute
 * positioning (which is relative to the stick parent), not floating or margins.
 */
nav.toc::-webkit-scrollbar,
nav.series::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
nav.toc ul,
nav.series ul {
  margin: 0;
  counter-reset: item;
}
nav.toc li,
nav.series li {
  margin-top: 0 !important;
  /*padding-left: 1em;
  position: relative; FOR ALIGN WRAP*/
}
nav.toc li::before,
nav.series li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  color: #444;
  top: 0;
  left: 0;
  position: relative;
  /*position: absolute;
  right: calc(100% - 0.55em); FOR ALIGN WRAP */
}
nav.toc :first-child > li,
nav.series :first-child > li {
  font-weight: bold;
}
nav.toc ul ul li,
nav.series ul ul li {
  font-weight: normal;
}
nav.toc ul ul ul li,
nav.series ul ul ul li {
  font-style: italic;
}
nav.toc ::before,
nav.series ::before {
  font-weight: normal;
  font-style: normal;
}
nav.toc > ul,
nav.series > ul {
  margin-top: 0.75em;
}
nav.toc > ul > li,
nav.series > ul > li {
  /*list-style-position: inside;*/
  padding-left: 0em;
}

nav.toc li a {
  text-decoration: none;
}

.active-toc > a {
  background: var(--palette-blue-bg);
  color: var(--palette-blue-fg);
}

/***********/
/* GUTTERS */
/***********/
.gutter {
  margin: 0 1rem;
  position: relative;
}

.gutter > .gutter-stick {
  position: sticky;
  /*top: calc(3rem - 1px);*/
  top: 1rem;
}

.gutter-float {
  clear: both;
  visibility: hidden;
  max-width: 30rem;
  /*margin-bottom: calc(3rem - 1px);*/
}

.gutter-full-width {
  max-width: unset;
}

.gutter-left > .gutter-float {
  float: right;
  /*margin-top: 3em;*/
}

.gutter-right > .gutter-float {
  float: left;
}

/**
 * The following are the few combinations for gutter tab components, that possibly appear
 * in multiple locations (like the TOC, depending on article width). The following looks a
 * bit messy, but it's really the best breakdown when you want some shared styles for the
 * multiple TOCs and the other tab-like elements. Both TOCs share a `.toc-wrap` class,
 * whereas the sidebar has an ID. All are styled with the same base appearance, and then
 * gutter-specific elements have specific things like height control.
 * 
 * Note also that the targets in question are themselves also `.tabs` elements. We are
 * trying to use this for the container element that it is, and avoid extra wrappers.
 */
.toc-wrap,
#md-wrap,
#side-details {
  background-color: var(--palette-accent-light-bg-color);
  border: 1px solid var(--palette-accent-light-border-color);
  margin: 0;
  padding: 0em 1em 1em 1em;
}

article > .toc-wrap {
  display: inline-block;
  margin: 0em 1.7em 1.7em 0;
  float: left;
  min-width: 25%;
  max-width: 35%;
}

.gutter-float > .toc-wrap {
  max-height: calc(100% - 1rem - 2px);
  overflow-y: scroll;
}

#md-wrap {
  margin: 1em 0 2em 0;
}
#md-wrap .tab-content {
  max-height: 20vh;
  overflow-y: scroll;
}

#side-details {
  font-size: 10pt;
  color: var(--palette-accent-text-color);
  /* allows sticky heading, fill to parent, and accounts for padding */
  height: calc(100% - 1rem);
  overflow-y: scroll;
}

#side-details-wrap {
  width: 100%;
}

/************/
/* ABSTRACT */
/************/
#abstract {
  border: 4px double;
  background-color: var(--palette-accent-bg-color);
  padding: 1em;
  display: grid;
  margin-bottom: 1.5em;
}

#abstract > :first-child {
  margin-top: 0;
}

#abstract > :last-child {
  margin-bottom: 0;
}

/************/
/* METADATA */
/************/
.category > a, .tags > a {
  border-radius: 2px;
  padding: 0 0.2em;
  /*background-color: #0000ff66;*/
}

button#details {
  color: #444;
  border-color: #444;
  font-style: italic;
  margin-top: 0.8em;
}

.full-scroll {
  padding: 0 1em;
  border: 1px solid;
  margin-bottom: 0;
  height: calc(100vh - 15em);
  overflow-y: scroll;
  height: min(98%, 100vh - 6.5em);
  position: sticky;
  top: 5.4em;
  /*top: 1em;*/
  max-height: 100vh;
}

/*********/
/* KATEX */
/*********/
.katex {
  font-size: 1.1em;
}

.katex-display > .katex {
  white-space: normal !important;
}

/***************/
/* BLOCKQUOTES */
/***************/
blockquote {
  border: 1px solid var(--palette-accent-border-color);
  background-color: var(--palette-accent-bg-color);
  padding: 1em;
  display: grid;
  margin: 2em;
}

blockquote > :first-child {
  margin-top: 0;
}

blockquote > :last-child {
  margin-bottom: 0;
}

/* fix bad firefox last list items */
/*@-moz-document url-prefix() {*/
/*************/
/* FOOTNOTES */
/*************/
a.footnote-back {
  margin-left: 4px;
}

/*************/
/* CITATIONS */
/*************/
.citations .csl-entry {
  margin-top: 1em;
}

/*************/
/* SIDENOTES */
/*************/
.sidenote {
  position: relative;
  padding: 0.5em;
  box-shadow: initial;
  border: 1px solid transparent;
}

[data-theme=dark] .sidenote:hover,
[data-theme=dark] .footnote-ref:hover {
  background: rgba(var(--magenta-rgb), 0.1) !important;
}

.sidenote .sidenote-numeral {
  display: block;
  border-bottom: 1px solid;
  font-weight: bold;
}

.left-sidenote {
  right: 0;
}

.left-sidenote .sidenote-numeral {
  text-align: right;
}

@media only screen and (max-width: 1100px) {
  .sidenote {
    display: none;
  }
}
/*@media only screen and (max-width: 1660px) {
    aside.gutter-right {
        width: calc(50% - 24rem - 2%);
        right: 1%;
        float: left;
    }

    aside.gutter-left {
        width: calc(50% - 24rem - 2%);
        left: 1%;
        float: right;
    }
}*/
/***********/
/* MERMAID */
/***********/
svg[id^=mermaid] {
  display: block;
  margin: auto;
}

details.gantt > div {
  overflow: scroll;
  max-height: 65vh;
}

.gantt svg[id^=mermaid] {
  width: 998px;
  /*height: min(max(98%, calc(100vh - 12em)), calc(100vh - 6.5em))*/
}

/*************/
/* PRES MODE */
/*************/
#pres-container {
  border: 4px double;
  padding: 0 1em 1em 1em;
  overflow: scroll;
  height: calc(100vh - 17.4em);
}

/*********************/
/* SPECIAL PAGE REFS */
/*********************/
span.block-spec-todo {
  background: var(--palette-li-green);
}

span.block-spec-thought {
  background: var(--palette-li-blue);
}

span.block-spec-question {
  background: var(--palette-li-yellow);
}

/*@keyframes flicker {
  from {
    text-shadow:
    0 0 0px #444,0 0 0px #444,
    0 0 20px #444, 0 0 40px #444;
  }
  to {
    text-shadow:
    0 0 1px #555, 0 0 2px #555,
    0 0 2px #555, 0 0 4px #555;
  }
}*/
@keyframes flicker-red {
  from {
    background: none;
  }
  to {
    background: var(--palette-li-red);
  }
}
@keyframes flicker-yellow {
  from {
    background: none;
  }
  to {
    background: var(--palette-li-yellow);
  }
}
@keyframes flicker-blue {
  from {
    background: none;
  }
  to {
    background: var(--palette-li-blue);
  }
}
a[href$=todo] {
  /*text-shadow:0 0 8px #888;*/
  animation: flicker-red 3s ease-in-out infinite alternate;
}

a[href$=thought] {
  /*text-shadow:0 0 8px #888;*/
  animation: flicker-yellow 3s ease-in-out infinite alternate;
}

a[href$=question] {
  /*text-shadow:0 0 8px #888;*/
  animation: flicker-blue 3s ease-in-out infinite alternate;
}

/***********/
/* ANCHORS */
/***********/
@keyframes flash-red {
  from {
    background: var(--palette-mid-red);
  }
  to {
    background: none;
  }
}
[id^=elem-]:target {
  animation: flash-red 5s;
}

/*# sourceMappingURL=note.css.map */