/* ==============
|  Load fonts
|================ */

@font-face {
    font-family: sourceSansPro;
    src: local('Source-Sans-Pro'), local('Source Sans Pro'),
         url(./fonts/SourceSansPro-Regular.woff2) format('woff2'),
         url(./fonts/SourceSansPro-Regular.ttf) format('truetype');
}

:root {
    --color-fg: #000;
    --color-bg: #FFF;
    --color-bg-darker: #EEE;
    --color-bg-yet-darker: #F2F2F2;
    --color-borders: #D6D6D6;
    --color-accent: #F05;
    --color-warning: #F05;
    --bradius: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-fg: #FFF;
        --color-bg: #000;
        --color-bg-darker: #212121;
        --color-bg-yet-darker: #313131;
        --color-borders: #424242;
        --color-accent: #F05;
    }
}

/* ==============
|  General
|================ */

* { box-sizing: border-box; z-index: 1; }

html { max-width: 100vw; height: 100%; margin: 0; padding: 0; }
body { display: grid; grid-template-columns: 1fr; min-height: 100%; grid-gap: 2em; margin: 0;
       background: var(--color-bg); color: var(--color-fg);
       font-family: sourceSansPro, Arial, Helvetica, Times; font-size: 1.2em; line-height: 1.5em; }


/* General text */
a { text-decoration: inherit; color: inherit; }

/* Images etc. */
img        { border-width: 0; }
figure     { margin: 0; padding: 0; }

/******************************************************
 * Main Aside + Tree navigation
 */

body > aside {
    box-shadow: -8px 0 8px -8px var(--color-borders) inset; }

#logoArea { display: grid; grid-template-columns: 60px 1fr;
    grid-gap: .8em; height: 60px; align-items: center; justify-items: center; font-weight: bold;
    text-align: left;
    box-shadow: 0 10px 10px -10px var(--color-borders);
}

.tree {
    --spacing: 1.5rem;
    --bwidth: 2px;
    --radius: 10px;
    line-height: initial; padding: 1em 2em;
    max-height: 90vh; overflow-y: auto; }

.tree li { display: block; position: relative;
    padding-left: calc(2 * var(--spacing) - var(--radius) - var(--bwidth)); }
.tree ul { margin-left: calc(var(--radius) - var(--spacing)); padding-left: 0; }
.tree ul li { border-left: var(--bwidth) solid var(--color-borders); }

.tree ul li:last-child { border-color: transparent; }

/* Horizontal tree lines */
.tree ul li::before {
  content: ''; display: block; position: absolute;
  top: calc(var(--spacing) / -2); left: calc(-1 * var(--bwidth));
  width: calc(var(--spacing) + var(--bwidth));
  height: calc(var(--spacing) + 1px);
  border: solid var(--color-borders);
  border-width: 0 0 var(--bwidth) var(--bwidth);
}

/* Triangles for highlighted / current pages */
.tree ul li.highlight:after { content: ""; display: block; position: absolute;
    top: 50%; left: calc(var(--spacing)); transform: translate(-50%, -50%);
    --outside-lines: 10px;
    width: 0; height: 0;
    border-top: var(--outside-lines) solid transparent;
    border-bottom: var(--outside-lines) solid transparent;
    border-left: var(--outside-lines) solid var(--color-accent);
    border-radius: 10px;
}
.tree .highlight { text-decoration: underline; }

/******************************************************
 * Page body
 */

#content { padding: 2em; display: grid; grid-template-rows: 1fr 80px; }
#content a { border-bottom: .1em solid transparent; transition: border-color .2s; }
#content a:hover,
#content a:active,
#content a:focus { border-color: var(--color-accent); }

.content-wrap { display: grid;
    justify-content: space-between; }

.content-wrap > aside { display: grid; grid-gap: 1em; }
.content-wrap > aside > * { border: 1px solid var(--color-borders); border-radius: var(--bradius) }
.content-wrap > aside > * > h3,
.content-wrap > aside > * > p { padding: .5em 1em; margin: 0; }
.content-wrap > aside > * > h3 { border-bottom: 2px solid var(--color-borders); }

.content-wrap table { border-collapse: collapse; width: 100%; border-top: 1px solid var(--color-borders); }
.content-wrap th,
.content-wrap td { font-weight: normal;
    vertical-align: top; text-align: left;
    padding: .1em 1em; }

.content-wrap table thead { margin-top: .5em;
    box-shadow: 0 10px 10px -10px var(--color-borders); }
.content-wrap table thead th { font-weight: bold; }
.content-wrap table a { display: inline-block; margin: .1em; padding: .1em .4em;
    font-weight: bold;
    border: 1px solid var(--color-bg);
    background: var(--color-bg-yet-darker); border-radius: var(--bradius); }

.content-wrap table tr { transition: background .2; }
.content-wrap table tr:hover { background: var(--color-bg-darker); }

.page-content { white-space: pre-wrap; }

/* Footer */
footer { position: relative; padding: 1em 0; }
footer:before { content: " "; display: block; position: absolute; top: 0; left: 0;
    width: 200px; height: 3px;
    background: var(--color-borders); }
footer a { margin-right: 1em; }

/* Prev/next
 */
#page-prev-next { display: grid; gap: 1em; margin: 2em 0; }
#page-prev-next .next { grid-column: 2; }
#page-prev-next > a { display: inline-block; font-size: .9em;
    padding: .5em; border: 1px solid var(--color-borders);
    text-decoration: none;
    border-radius: var(--bradius); transition: background .2s, color .2s, box-shadow .2s; }
#page-prev-next > a:hover { background: var(--color-bg-yet-darker); }
#page-prev-next > a > span:first-child { display: block; color: var(--color-avocado); font-size: .9em; font-weight: bold; }
#page-prev-next span:nth-child(3) { display: block; font-size: .9em; }
#page-prev-next .card-title { display: block; margin: .15em 0; }

/* Named entities in text body */
.ne-actor:before,
.ne-time:before,
.ne-art-style:before,
.ne-job:before,
.ne-location:before { display: inline-block; content: " "; background: var(--color-borders);    width: 20px; height: 20px; border-radius: var(--bradius);
   vertical-align: middle; transform: translate(0, -2px); margin: 5px; }

/* Responsive design */

@media screen and (min-width: 1080px) {
    body { grid-template-columns: 400px 1fr; }
    body > aside { grid-column: 1; grid-row: 1; }
    body > #content { grid-column: 2; grid-row: 1; }
    #page-prev-next { grid-template-columns: 1fr 1fr; }
}

@media screen and (min-width: 1700px) {
    .content-wrap { grid-template-columns: 800px 400px; }
}