/* In a few places, this file has to use parser tricks to make the WBE
 * browser do something different from a real browser. The WBE browser
 * supports:
 *
 * Ch 6: font-{size,weight,style}, color, background-color
 * Ch 11: border-radius, opacity, mix-blend-mode, overflow
 * Ch 13: transform, transition
 * Ch 14: outline
 * Ch 15: image-rendering
 *
 * Of these, basically only the first four (fonts & colors) matter.
 * Some effort has been put toward making class selectors do something
 * nice: highlighting info boxes, syntax highlighting, and making
 * footnotes stand out. */

html { font-size: 24px; line-height: 1.2; padding: 1em; }
body {
    max-width: 60ch; margin: 0 auto; font-family: 'Crimson Pro', 'Times', serif;
    font-weight: normal; text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
@media (prefers-color-scheme: light) {
body {
    color:#333;
}
}
@media (max-width: 800px) {
    html { font-size: 18px; }
}

pre, code { hyphens: none; -webkit-hyphens: none; font-family: 'Inconsolata', monospace; }
pre {
    font-size: 18px; overflow: auto; padding-left: 2ex;
    background-color: #ddd; /* For WBE browser only */
    background: transparent;
}

dt { margin-top: 1em; }
dd { margin-bottom: 1em; }

abbr { font-variant: small-caps; font-weight: bold; }

blockquote { border-left: 1ex solid #eee; padding-left: 1ex; margin-left: 0; }

footer { text-align: center; font: italic 60% serif; margin: 5em 0; }

header, h1, strong { font-family: 'Crimson Pro', 'Garamond', serif;}
@media (prefers-color-scheme: light) {
header, h1, strong {
    color:black;
}
}
h1 { font-size: 115%; font-weight: bold; margin: 2.5em 0 1em; text-align: center; }

/* Auto-number section headings, but not on the main page. */
/* Also, on hover over section headings, show a "#" to indicate permalinks. */
body > h1 { counter-increment: section; }
body > h1::before { content: counter(section) ". "; color: #888; }
.main h1::before { content: none !important; }
h1:not(.title):hover { cursor: pointer; }
h1:not(.title):hover::after {
    content: "#"; color: #888;
    /* So the header doesn't change width as you hover on it */
    position: absolute; margin-left: 0.5ch;
}

header { text-align: center; margin: 3em 0 1em; }
header h1 { margin: 0; font-size: 200%; font-weight: normal; text-align: center; letter-spacing: -0.08ex }
.main header h1 { font-size: 200%; } /* override another style ugh */
.main header * { margin: 0; }
header .author { font-style: italic; }
header .author:before { content: "By "; }

@media (prefers-color-scheme: light) {
a:link { color: #04a; }
a:hover { color: #08f; }
a:visited { color: #84a; }
a:visited:hover { color: #c4f; }
a:active { color: #f64; }
}

li { margin: 1em 0; }

/* On the main page, <ol> contains chapter names and <hi> contains
 * Part names; all should be big. */
.main ol, .main h1 { font-size: 120%; }
.main header { margin-bottom: 3em; }
.main > h1 { margin: 0; }
.main ol { margin: 0; padding-left: 2.5ex; }
@media (prefers-color-scheme: light) {
.main ol { color: black; }
}
.main li { font-size: 80%; font-style: italic; }
.main li a, .main li .link { font-size: 125%; font-style: normal; }
#onepage { font-size: 125% }
.intro, .outro { }
.intro ol { list-style: lower-roman; }
.outro ol { list-style: upper-alpha; }

p { margin: 6pt 0; }
p + p { text-indent: 1em; }

nav.links {
    line-height: 40px; text-align: center;
    border-radius: 10px; background: #eee;
    padding: 0 40px; position: relative; margin-bottom: 3em;
}
@media (prefers-color-scheme: dark) {
nav.links {
    background: #333;
}
}
nav.links ~ nav.links { margin-top: 3em; }
@media (prefers-color-scheme: light) {
nav.links {
    color: black;
}
nav.links a {
    color: black;
}
}
nav.links a[rel] {
    display: block; width: 40px; height: 100%; position: absolute; top: 0;
    font-size: 36px; text-decoration: none; cursor: pointer;
}
nav.links a[rel]:hover { background: #ddd; }
@media (prefers-color-scheme: light) {
nav.links a[rel]:hover { background: #222; }    
}

nav.links a[rel=prev] {
    left: 0; border-radius: 10px 0 0 10px; border-right: 3px solid white;
}
nav.links a[rel=next] {
    right: 0; border-radius: 0 10px 10px 0; border-left: 3px solid white;
}

#toc:before {
    content: "Table of Contents"; display: block; text-align: center;
    font-size: 105%; font-weight: bold; background-color: #eee;
    font-family: 'Crimson Pro', 'Garamond', serif; color: black; 
}
@media (prefers-color-scheme: dark) {
#toc:before {
    color:white;
    background-color:#333;
}
}
div#toc { border: 2px solid #eee; border-radius: 10px; }
div#toc:before { padding: .5em 0; border-radius: 10px 10px 0 0; }

nav#toc {
    float: right; width: 25ex; clear: right; margin: 0 -28ex 1em 0;
    font-size: 66%; border-bottom: 2px solid #eee;
}
nav#toc:before { padding: 1ex; }
nav#toc ul { list-style: none; padding: 0; }

nav#toc { display: none; }
@media only screen and (min-width: 1150px) {
    div#toc { display: none; }
    nav#toc { display: block; }
}
.main nav#toc { display: none; }

body { counter-reset: fn; }
.note-container { counter-increment: fn; white-space: pre; cursor: pointer; }
.note-container:after { content: "]"; }
.note-container:before { content: " [" counter(fn); }
.note-container.open:before { content: " ["; }
.note { font-style: italic; white-space: normal; }
.note em { font-style: normal; }
@media (prefers-color-scheme: light) {
.note-container:after, .note-container:before { color: #a86; }
.note { color: #a86;}
}
/* Assume no footnotes on main page, but margin numbers */
body.main { padding: 0 4ex; }
@media only screen and (min-width: 1150px) {
    body { width: 60ch; padding: 0 17ex 0 0; }
    body.main { padding: 0; }
    .note {
        float: right; width: 25ex; clear: right; margin: 0 -28ex 1em 0;
        font-size: 110%; vertical-align: reset; text-align: left;
    }
    div .note { margin-right: calc(-28ex - 1rem - 2px); }
}
@media only screen and (min-width: 1150px) {
    .note-container { font-size: 60%; vertical-align: super; cursor: auto; }
    .note-container.open:before { content: " [" counter(fn); color: #a86; }
    .note:before { content: counter(fn) ". "; }
}
@media (prefers-color-scheme: light) ) {
.note {
    color: black;
}
}
@media only screen and (min-width: 1350px) {
    body { padding: 0 17ex; }
}
@media only screen and (max-width: 1149px) {
  .note-container .note { display: none; }
  .open .note { display: inline; }
  .note form { display: inline; }
}

.todo, .quirk, .warning, .installation, .further, .demo, .example, .output {
    padding: .5em .5em .5em; margin: 1em 0;
}
.quirk:before, .warning:before, .installation:before, .demo:before, .further:before {
    display: block;
    font-size: 125%; font-weight: 600; font-family: 'Crimson Pro', 'Garamond', serif;
    margin-bottom: .5em; border-bottom: 1px solid currentColor; padding-bottom: .25em;
}

img { max-width: 100%; }

.quirk { outline: 2px solid purple; }
.quirk:before { content: "Quirk"; color: purple; }
.warning { outline: 2px solid red; }
.warning:before { content: "Warning"; color: red; }
.installation { outline: 2px solid blue; }
.installation:before { content: "Installation"; color: blue; }
.demo { outline: 2px solid gray; }
.demo:before { content: "Demonstration"; color: gray; }
.further { outline: 2px solid green; }
.further:before { content: "Go further"; font-weight: bold; color: green; }
.widget { width: 100%; border: 2px solid navy; }
.center { text-align: center }
.example, .output { outline: 2px solid lightgray; padding: 1em }

@media (prefers-color-scheme: dark) {
.quirk { outline: 2px solid #CBC3E3; }
.quirk:before { color: #CBC3E3; }
.warning { outline: 2px solid #FFCCCB; }
.warning:before { color: #FFCCCB; }
.installation { outline: 2px solid lightblue; }
.installation:before { color: lightblue; }
.further { outline: 2px solid lightgreen; }
.further > :first-child:before { color: lightgreen; }
.widget { width: 100%; outline: 2px solid navy; }
}

code .st { color: #666; }
code .cf { color: #606; }
code .kw { color: #606; font-weight: bold; }
code .im { color: #606; }
code .co { color: #a86; }

@media (prefers-color-scheme: dark) {
code .st { color: #aaa; }
code .cf { color: #a0a; }
code .kw { color: #a0a; }
code .im { color: #a0a; }
code .co { color: #C4A484; }
}

.todo { background: darkred; color: white; padding-bottom: 1em; }
.todo:before { content: "This book is a work in progress:"; }
@media (prefers-color-scheme: dark) {
.todo {
    background: lightred;
    color:black;
}
}
input[type=checkbox][disabled] { display: none; }

#overlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(256, 256, 256, .9);
    overflow:auto;
}
.popup {
    padding: 1em; border: 1px solid gray; box-shadow: 0 0 20px 10px gray;
    width: 50ex; margin: 3em auto; background: white;
}
@media (prefers-color-scheme: dark) {
#overlay {
    background-color: rgba(0, 0, 0, .9);
}
.popup {
    background: black;
}
}
.popup h1 { text-align: center; }
.popup .inputs { font-size: 30px; }
.popup .inputs label { font-size: 24px; }
.popup input { font-size: 30px; width: 400px; }
.popup .legalese { font-size: 60%; }
.popup button { font-size: 24px; }

.popup textarea { width: 500px; height: 250px; }

.confirm-feedback { display: none; }
.confirm-feedback.active { display: block; }

p, li, div.sourceCode, .note { position: relative; }
.tools {
    position: absolute; right: 0; top: -1.5em; background: #eee;
    padding: .125em .75em; border-radius: .75em;
}
.tools a { margin: 0 1ex; }
@media only screen and (min-width: 1150px) {
    .feedback.note { font-size: 66%; }
}
.feedback.note { color: purple; }
.feedback.note span { outline: none; }
.feedback.note form { margin-top: .5ex; }
@media (prefers-color-scheme: dark) {
.tools {
    background: #333;
}
.feedback.note { color: #CBC3E3; }
}

form { overflow: auto; }
input, button { font-size: inherit; font-family: inherit; }
form h1 { margin-bottom: 1em; margin-top: 0; }
.field { display: flex; }
.field label { min-width: 15ex; vertical-align: bottom; }
.field input { flex-grow: 1; min-width: 0; }
.checkoff { float: right; }
.checkoff input { vertical-align: middle; }
a.checkoff { font-size: 24px; }
form .checkoff, form button[type=submit] { margin-top: 1em; }

#signup { outline: 2px solid gold; position: relative; text-align: center; }
#signup-close {
    position: absolute; top: 0; right: 8px;
    font-size: 0; text-decoration: none; color: #333;
}
#signup-close:hover { color: #f64; }
#signup-close:active { color: red; }
#signup-close::before { font-size: 24px; content: "❌︎"; }

.wide-ad { display: flex; gap: 1em; padding: 1em; outline: 2px solid #59b6ce; align-items: top; }
.wide-ad h1:hover::after { content: none; }
.wide-ad figure { margin: 0; }
.wide-ad figure figcaption { display: none; }
.wide-ad figure img { height: 7em; max-width: none; display: block; }
.wide-ad .description { display: flex; flex-direction: column; gap: 1em; }
.wide-ad .description * { margin: 0; }
@media only screen and (max-width: 520px) {
  .wide-ad { padding: .5em; gap: .5em; }
}

aside.ad .wide { display: none; }
aside.ad .narrow {
    outline: 2px solid #59b6ce; background: #ecf5f8; text-align: left;
    display: flex; gap: .5ex; padding: .5ex; justify-content: space-between;
}
@media (prefers-color-scheme: dark) {
    aside.ad .narrow { background: #132832; }
}
aside.ad .narrow a { white-space: pre; }
@media only screen and (max-width: 520px) {
  aside.ad .narrow { display: block}
}
@media only screen and (min-width: 1150px) {
    aside.ad .narrow { display: none; }
    aside.ad .wide {
        float: right; font-size: 66%; width: 25ex; clear: right; margin: 0 -28ex 1em 0;
        position: relative; display: block; outline: 2px solid #59b6ce; box-sizing: border-box;
    }
    aside.ad img { width: 100%; display: block; }
    aside.ad a {
        position: absolute; bottom: .5ex; height: 100%; width: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, black 100%);
        color: white; font-size: 120%; text-align: center; display: flex;
        flex-direction: column-reverse; padding: 1ex; box-sizing: border-box;
        opacity: 0; text-decoration: none; 
    }
    aside.ad a:hover { opacity: 1; }
    aside.ad a:visited { color: white; }
    aside.ad a:active { color: #59b6ce; }
}

.outline { font-size: 60%; font-family: 'Inconsolata', monospace; column-width: 30ch; }
.outline code { break-inside: avoid; display: block; }
.outline > code { margin: .33em 0; }
.outline code > code { margin-left: 2ch; }

/* Do not merge these two blocks, workaround for WBE browser bug */
@media print {
    html { font-size: 12px; }
}
@media print {
    pre { font-size: 10px; }
    #signup, nav.links { display: none;}
    .note-container:before { content: " ["; }
    .note-container, .note-container:before, .note-container:after { color: navy; }
    #toc a { text-decoration: none; color: black; }
    aside.ad { display: none; }
}

.highlight-region { font-size: 24px; line-height: 1.5; padding: 1em; }
.highlight-region mark { position: relative; padding: .1em; }
.highlight-region label {
    position: absolute; font: bold 80% sans-serif; 
}
.highlight-region label.above { top: -1.2em; }
.highlight-region label.below { bottom: -1.2em; }
.highlight-region label.left { left: 0; }
.highlight-region label.right { right: 0; }
.highlight-region label.side { top: .4em; }
.highlight-region label.side.left { right: calc(100% + .2em); left: auto; }
.highlight-region label.side.right { left: calc(100% + .2em); right: auto; }

.author-picture { display: flex; justify-content: center }