:root {
  /* Master colors */
  --color-accent: #be1622;
  --color-accent50: rgba(190, 22, 34, 0.5);
  --color-border: #e2ded0;
  --color-border-alt: #ececec;
  --color-overlay-bg: rgba(0,0,0,0.3);
  --color-overlay-text: rgba(255,255,255,0.7);
  --color-shadow: rgba(0,0,0,0.05);
  /* global ui */
  --ui-font-family: system-ui, sans-serif;
  --ui-color-bg: #f5f5f5;
  --ui-color-text: #757575;
  --ui-color-hover: var(--reader-color-bg);
  /* reader */
  --reader-color-bg: #fff;
  --reader-color-hover: var(--ui-color-bg);
  --reader-color-text: #181a1b;
  --reader-quote-color: var(--ui-color-text);
  --reader-quote-bg: transparent;
  --reader-font-family: 'Harding', serif;
  --reader-font-size: 1.1rem;
  --reader-width: 45em;

  /* Declined colors */
  --color-button-bg: transparent;
  --color-button-border: transparent;
  --color-button-text: inherit;
  --color-link: var(--color-accent);
  --color-toolbar-bg: var(--color-accent);
  --color-toolbar-text: var(--color-border);

  /** sizes */
  --toolbar-height: 48px; /* button size */
  --toc-width: 20rem;

}

html.dark {
  --color-accent: #ff0011;
  --color-accent50: rgba(255, 0, 17, 0.5);
  --color-border: #e2ded0;
  --color-toolbar-bg: #be1622;

  --reader-color-bg: #181a1b;
  --reader-color-hover: #34383c;
  --reader-color-text: #e6e6e6;
  --reader-quote-color: inherit;
  --reader-quote-bg: var(--reader-color-hover);

  --ui-color-bg: var(--reader-color-bg);
  --ui-color-text: #b0b0b0;
  --ui-color-hover: #34383c;
}

@font-face {
  font-family: 'Harding';
  src: url('../fonts/HardingText-Regular-Web.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Harding';
  src: url('../fonts/HardingText-RegularItalic-Web.woff2') format('woff2');
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Harding';
  src: url('../fonts/HardingText-Bold-Web.woff2') format('woff2');
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: 'Harding';
  src: url('../fonts/HardingText-BoldItalic-Web.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'TheSans';
  src: url('../fonts/TheSansOsF-Plain.woff2') format('woff2');
  font-display: optional;
}

@font-face {
  font-family: 'TheSans';
  src: url('../fonts/TheSansOsF-PlainItalic.woff2') format('woff2');
  font-style: italic;
  font-display: optional;
}

@font-face {
  font-family: 'TheSans';
  font-display: optional;
  src: url('../fonts/TheSansOsF-SemiBold.woff2') format('woff2');
  font-weight: bold;
  font-display: optional;
}

@font-face {
  font-family: 'TheSans';
  src: url('../fonts/TheSansOsF-SemiBoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: optional;
}

/** serif for optional font change */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 100%;
  src: url('../fonts/Merriweather[opsz,wdth,wght].woff2') format('woff2');
  font-display: optional;
}

@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300 900;
  font-stretch: 100%;
  src: url('../fonts/Merriweather-Italic[opsz,wdth,wght].woff2') format('woff2');
  font-display: optional;
}

/* replicated from teinte.css for home */
html,
body {
  /* needed to keep fixed units with large tables */
  max-width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}
*, *:after, *:before {
  box-sizing: inherit;
}

/* Specific */

html {
  font-family: var(--ui-font-family);
  font-weight: 300;
}

body,
html {
  /* bug wide tables */
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ui-font-family);
}

h2,
h3,
h4,
h5,
h6 {
  color: var(--color-accent);
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

article.article,
article.bibliography,
article.chapter {
  background-color: var(--reader-color-bg);
  color: var(--reader-color-text);
  font-family: var(--reader-font-family);
  font-size: var(--reader-font-size);
  max-width: var(--reader-width);
  padding: 3rem 5vw;
  margin-left: auto;
  margin-right: auto;
}

h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id],
a[id] {
  scroll-margin-top: 5rem;
}

blockquote.q,
blockquote.quote {
  margin: 0;
  color: var(--reader-quote-color);
  background: var(--reader-quote-bg);
  padding: .6em 0.5em .6em 1.5em;
}

table th,
table.table th,
table.data th {
  color: inherit;
  background: var(--reader-color-hover);
}

/** global layout */

body {
  background-color: var(--ui-color-bg);
  color: var(--ui-color-text);
}

#app-header {
  position: fixed;
  top: 0;
  left: 0; 
  width: 100vw; /* page may be enlarged by tables */
  min-height: 48px;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  z-index: 50;
  will-change: transform;
}

#app-header.hide {
  transform: translateY(-100%);
}

#app-header > .app-title {
  width: 100%;
}

#app-title {
  flex: 1 1 0;
  text-align: center;
  font-weight: 600;
  font-size: 1.1em;
  white-space: nowrap;
  overflow-x: auto;     /* enable horizontal scroll */
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  cursor: pointer;      /* signals interactiveness */
  padding: 0 8px;
}

main {
  padding-top: var(--toolbar-height);
  position: relative;
}

body.home main {
  padding-top: 6rem;
}


@media (min-width: 900px) {
  #app-header {
    width: 100%; /* for scrollbars */
  }
  body.home #app-header {
    display: flex;
  }
  body.home #app-header > * {
    flex-basis: 50%;
  }
}

/** toolbars */

.toolbar {
  color: var(--color-toolbar-text);
  background-color: var(--color-toolbar-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--toolbar-height);
}

.toolbar a {
  color: inherit;
}

button,
.button {
  /* Box model */
  display: inline-flex; /* enables flexbox to center icon in it*/
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  
  /* Typo */
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  white-space: nowrap;

  /* colors */
  background: var(--color-button-bg);
  border: 2px solid var(--color-button-border);
  border-radius: 0.5em;
  color: var(--color-button-text);

  /* misc */
  cursor: pointer;
  outline: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* removes tap highlight on iOS/Android */
}

button:focus,
.button:focus {
  outline: none;
}

button:active,
button:focus,
button:hover,
.button:active,
.button:focus,
.button:hover {
  outline: none;
  box-shadow: 0 4px 16px var(--color-shadow);
}

button:hover,
.button:hover {
  background-color: var(--color-button-hover);
}

button[disabled],
.button[disabled] {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--color-button-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--color-shadow);
}

svg.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  pointer-events: none;
  flex-shrink: 0; /* prevents shrinking if button is narrow */

  stroke: currentColor; /* follow font color of button */
  stroke-width: 2;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

html .icon-sun {
  display: none;
}

html.dark .icon-moon {
  display: none;
}

html.dark .icon-sun { 
  display: inline-block;
}

#toast {
  visibility: hidden;
  min-width: 300px;
  background-color: var(--reader-color-text);
  color:  var(--reader-color-bg);
  text-align: center;
  border-radius: 8px;
  padding: 0.75rem;
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  z-index: 50;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.5s, visibility 0.5s;
  pointer-events: none;
}

#toast.visible {
  visibility: visible;
  opacity: 0.92;
}

#app-font-family {
  font-family: var(--reader-font-family);
  font-weight: normal;
}

button.font {
  font-size: 24px;
}

/** scroller */
#scroll-handle {
  position: fixed;
  right: 2vw;
  bottom: 2vw;
  width: 42px;
  height: 42px;
  z-index: 100;
  color: var(--color-accent);
  border-radius: 50%;
  border: var(--color-accent) 2px solid;
  opacity: 0.2;
}

html.dark #scroll-handle {
  opacity: 0.7;
}

/** date slider */

#dates-bar {
  padding: 0 8px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input.year {
  width: 5ex;
  padding: 0 0.5ex;
}

input.year.right {
  text-align: right;
}

#dates-center {
  width: 100%;
  padding: 0 12px 8px 12px;
}

.noUi-target {
  background: inherit;
  border-color: var(--color-border);
  box-shadow: none;
}

.noUi-base {
  z-index: inherit;
  background-color: inherit;
}

.noUi-pips-horizontal {
  top: 20%;
  z-index: 2;
}

.noUi-pips {
}

.noUi-value-sub {
  color: var(--color-toolbar-text);
}

.noUi-connect,
[disabled] .noUi-connect {
  background-color: var(--ui-color-bg);
  opacity: 0.5;
}

.noUi-tooltip {
  border-color: #D9D9D9;
  background: #fff;
  color: #000;
}

.noUi-origin {
  z-index: 4;
}

.noUi-handle {
  border: 1px solid var(--color-border);
  background: var(--ui-color-bg);
  box-shadow: inset 0 0 1px var(--reader-color-bg), inset 0 1px 7px var(--color-border-alt), 0 3px 6px -3px #000;
}

.noUi-horizontal .noUi-handle {
  top: -3px;
  height: 22px;
}

/* Handle stripes; */
.noUi-handle:before,
.noUi-handle:after {
  background: var(--color-border);
  top: 4px;
  height: 12px;
}

.noUi-marker {
  position: absolute;
  background: var(--color-toolbar-text);

}
.noUi-marker-sub {
  background: var(--color-toolbar-text);

}
.noUi-marker-large {
  background: var(--color-toolbar-text);
}

.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/** Texts reader */

aside.note {
  margin: 0 0 0 0;
  padding: 0;
  border: none;
}

section {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

p.booktitle a {
  display: block;

}

p.booktitle a:hover {
  text-decoration: none;
  background-color: var(--ui-color-hover);
}



/* Overlays (toc, settings) */

.overlay {
  position: fixed;
  top:0;
  bottom: 0;
  left:0;
  right: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 100;
  background: var(--color-overlay-bg);
  color: var(--color-overlay-text);
}

.overlay.hidden {
  display: none;
}

.overlay.closing > * {
  transform: translateY(120%);
  transition: transform 0.18s cubic-bezier(.23,1.09,.65,1);
}

#settings-overlay {
  align-items: flex-end;
}

#settings {
  max-width: 480px;
  max-height: 50vh;
  width: 100vw;
  position: absolute;
  bottom: 0;
  /*
  box-shadow: 0 -4px 24px rgba(0,0,0,0.07);
  transition: transform 0.22s cubic-bezier(.23,1.09,.65,1);
  transform: translateY(0);
  text-align: left;
  left:0;
  touch-action: none;
  */
}

#toc-overlay {
  display: none;
  padding-top: 5vh;
}

#toc-overlay.visible {
  display: flex;
}

#toc-panel {
  position: absolute;
  background-color: var(--ui-color-bg);
  color: var(--ui-color-text);
  width: 90vw;
  max-width: var(--toc-width);
  max-height: 85vh;
  overflow-y: auto;
  padding: 1rem;
  line-height: 130%;
}

#close-toc {
  background: none;
  color: var(--reader-color-text);
  position: fixed;
  z-index: 101;
  top: 5vh;
  left: 82vw;
}

#toc-panel h2 {
  font-size: inherit;
  font-weight: 600;
  color: inherit;
}

#toc-panel header {
  padding-right: 0.7rem;
}

.toc {
  background-color: inherit;
}

.toc a,
.toc li > div {
  display: block;
  padding: 1rem 0.7rem;
  font-size: 1em;
  border-radius: 0;
}
.toc a:hover {
  background-color: var(--ui-color-hover);
}
.toc ol ol {
  margin-left: 0.9em;
}


@media (min-width: 900px) {

  body,
  html {
    /* bug sticky */
    overflow: unset;
  }

  main {
    padding: var(--toolbar-height) 1rem 2rem 1rem;
  }

  .document main {
    display: grid;
    grid-template-columns: var(--toc-width) 1fr;
    grid-template-areas: "toc article";
    column-gap: 0;
    justify-content: center;
    margin: 0 auto;
    max-width: calc(var(--toc-width) + var(--reader-width));
  }

  .document main > article {
    grid-area: article;
  }

  #toc-overlay,
  #toc-panel {
    all: unset;
  }

  #toc-overlay {
    z-index: 45;
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: 0;
    width: var(--toc-width);
    height: 100vh;
    overflow: auto;

    padding-top: 0;
    background: transparent;
    color: inherit;
  }

  #toc-panel {
    padding: 1rem 0 1rem 1rem;
  }

  #app-toc {
    display: none;    /* Hide menu button */
  }
}


/** Home page, filter in bibliography */

article.bibliography {
  padding-left: 0;
  padding-right: 0;
}

.hits {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hit {
  position: relative;
}

.hit a {
  display: block;
  padding: 0.25em 1.5em;
  color: inherit;
}

.hit::after,
.hit:before{
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 1em 1em;
  pointer-events: none;
}

.hit:before {
  background-position: left 0.3em top 0.5em;
}

.hit:after{
  background-position: right 0.3em top 0.5em;  
}

.hit.article:before {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6m-4 5H8m8 4H8m2-8H8"/></svg>');
}

.hit.book:before {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 17H6c-1 0-2 1-2 2v1c0 1 1 2 2 2h14"/><path d="M4 19.5V4c0-1 1-2 2-2h14v15"/><path d="M19 17c-1 1-1 4 0 5"/></svg>');
}

.hit.chapter:before {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zm20 0h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>');
}

.dark .hit.article:before {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6m-4 5H8m8 4H8m2-8H8"/></svg>');
}

.dark .hit.book:before {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 17H6c-1 0-2 1-2 2v1c0 1 1 2 2 2h14"/><path d="M4 19.5V4c0-1 1-2 2-2h14v15"/><path d="M19 17c-1 1-1 4 0 5"/></svg>');
}

.dark .hit.chapter:before {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zm20 0h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>');
}

.hit.hourglass::after {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="%23be1622" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2h14M5 22h14M7 2v6c0 3 3.5 4.5 3.5 4.5S7 14 7 17v5M17 2v6c0 3-3.5 4.5-3.5 4.5S17 14 17 17v5"/></svg>');
}

.dark .hit.hourglass::after {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="%23ff0011" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2h14M5 22h14M7 2v6c0 3 3.5 4.5 3.5 4.5S7 14 7 17v5M17 2v6c0 3-3.5 4.5-3.5 4.5S17 14 17 17v5"/></svg>');
}

.hit.rights::after {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="%23be1622" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="15" rx="10" ry="6.9"/><path d="M15.5 17a4 4 0 0 1-4.5 2 4 4 0 0 1-3-4 4 4 0 0 1 3-3.9 4 4 0 0 1 4.5 1.9M7 9a5 6 0 0 1 2.3-6 5 6 0 0 1 5.4 0A5 6 0 0 1 17 9"/></svg>');
}

.dark .hit.rights::after {
  background-image: url('data:image/svg+xml;utf8,<svg stroke="%23ff0011" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="15" rx="10" ry="6.9"/><path d="M15.5 17a4 4 0 0 1-4.5 2 4 4 0 0 1-3-4 4 4 0 0 1 3-3.9 4 4 0 0 1 4.5 1.9M7 9a5 6 0 0 1 2.3-6 5 6 0 0 1 5.4 0A5 6 0 0 1 17 9"/></svg>');
}



.hit a:hover {
  background: var(--reader-color-hover);
  text-decoration: none;
}

.hit.hidden {
  display: none;
}

#filter-bar {
  position: relative;
  display: inline-block;
  width: 100%;
}

#filter-icon {
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ui-color-text);
}

#filter-clear {
  position: absolute; 
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  color: var(--ui-color-text);
}

header input[type=number],
header input[type=search],
header input[type=text] {
  outline: none;
  border: none;
  font: inherit;
  font-size: 1.4rem;
  background: var(--ui-color-bg);
  color: var(--reader-color-text);
}

header input[type=number]:focus,
header input[type=search]:focus,
header input[type=text]:focus {
  background: var(--reader-color-bg);
  outline: none;
}

#filter-input {
  padding-left: 28px; 
  padding-right: 28px; 
  width: 100%;
}

p.moto {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 2rem 1ex 2rem 1ex;
  text-indent: 0;
}

/* Footer */

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: stretch;
}

#footer .block {
  padding: 3rem 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--reader-width)
}

.logos {
  display: flex;
  justify-content: space-around;
}

a.logo {
  display: block;
  max-width: 150px;
}

a.logo img {
  width: 100%;
}

.sponsors {
  margin: 1rem 0;
}

.sponsors > strong {
  color: var(--color-accent);
}