/* Color --vars are defined in template/head. */
:root {
    box-sizing: border-box;
    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
/* Special pseudo-elements. */
::selection, mark, ::target-text {
    background-color: var(--accent);
    color: var(--on-accent);
    border-radius: 0.2em;
    padding: 0 0.1em;
}
::backdrop {
    opacity: 0.7;
    background-color: var(--fg);
}
::marker {
    color: var(--accent);
}
/*
NO, JUST NO
::first-letter {
    font-weight: 550;
}
*/
section:target,
h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
    border-left: 0.1em solid var(--accent);
}
* {
    box-sizing: border-box;
    border-spacing: 0;
    font-family: sans-serif;
    scrollbar-color: var(--accent) rgba(0, 0, 0, 0);
    caret-color: var(--accent);
    accent-color: var(--accent);
}
* {
    cursor: url("text-48.png") 18 24, text;
}
body,
main, article, aside, footer, header, nav, section, search,
div,
img, video, audio, area, map, track, svg, canvas,
embed, fencedframe, iframe, object,
fieldset, form, output, progress,
details
{
    cursor: url("default-48.png") 0 0, default;
}
a, button, select, summary,
input[type="button"],
input[type="checkbox"],
input[type="color"],
input[type="file"],
input[type="image"],
input[type="radio"],
input[type="range"],
input[type="reset"],
input[type="submit"]
{
    cursor: url("pointer-48.png") 0 0, pointer !important;
}
*, *::before, *::after {
    box-sizing: inherit;
}
html {
    font-size: large;
    min-height: 100%;
    padding: 0;
    margin: 0;
}
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    min-height: 100%;
    font-size: max(1em, 16px, 1rem);
}
main {
    padding: 1em;
}
@media (min-device-width: 500px) {
    main {
        margin: 0 auto;
        max-width: 70em;
    }
}
nav, footer {
    padding: 0.5em 1em;
}
section {
    padding: 0 0.3em;
}
p {
    line-height: 1.5;
}
q {
    padding: 0.2em;
    display: inline-block;
}
a {
    color: inherit;
    font-family: inherit;
    font-style: italic;
    padding: 0.1em;
    border-radius: 0.2em;
}
a:hover {
    background-color: var(--accent);
    color: var(--on-accent);
}
a:active {
    background-color: var(--fg);
    color: var(--bg);
}
a[href^="#p_"] {
    opacity: 0.5;
}
img {
    width: 100%;
    height: auto;
}
img:not(figure img) {
    margin: 1em 0;
}
hr {
    border: 0.1em solid var(--fg);
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 1.3em;
}
h4 {
    font-size: 1.2em;
}
h5 {
    font-size: 1.1em;
}
h6 {
    font-size: 1em;
}
h2 a[href^="#"],
h3 a[href^="#"],
h4 a[href^="#"],
h5 a[href^="#"],
h6 a[href^="#"]{
    display: none;
}
h2:hover a[href^="#"],
h3:hover a[href^="#"],
h4:hover a[href^="#"],
h5:hover a[href^="#"],
h6:hover a[href^="#"]{
    display: inline;
}
/* non-clashing headings */
h1+h2, h2+h3, h3+h4, h4+h5, h5+h6 {
    margin-top: .5em;
    padding-top: 0;
}
li {
    padding: 0.3em;
}
dt, dd {
    padding: 0.2em;
}
dt {
    color: var(--accent);
    font-weight: bold;
}
ul, ol {
    padding-left: 1em;
}
pre, blockquote {
    margin: 0px;
    padding: 0.7em;
    overflow-x: auto;
}
pre {
    font-family: monospace;
}
pre[lang]:not([lang=""])::before {
    content: '#lang ' attr(lang) '  ';
    color: var(--gray);
    font-weight: bold;
    display: block;
}
pre[lang="js"][contenteditable]::before {
    content: '#lang js (Ctrl+Enter to evaluate)';
    color: var(--gray);
    font-weight: bold;
    display: block;
}
blockquote {
    font-family: serif;
    font-style: italic;
}
blockquote::before {
    content: '>  ';
    color: var(--gray);
    font-weight: bold;
}
table {
    min-width: 50%;
    margin: 1em auto;
    border-collapse: collapse;
    border: 0.1em solid var(--fg);
    overflow-x: scroll;
}
td, th {
    border: 1px solid var(--fg);
    background-color: var(--bg);
    text-align: left;
    font-family: monospace;
    padding: 0.2em;
}
thead, tfoot {
    font-weight: bold;
}
figure {
    margin: 1em 0;
    border-left: 0.2em solid var(--fg);
    border-top-left-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
}
caption, figcaption {
    background-color: var(--fg);
    color: var(--bg);
    text-align: left;
    padding: 0.5em;
}
figcaption {
    border-bottom-right-radius: 0.2em;
    border-bottom: 0.1em solid var(--fg);
}
footer {
    border-top: 0.1em solid var(--fg);
}
nav {
    background-color: var(--accent);
    color: var(--on-accent);
}
nav a {
    margin: 0.5em;
    color: var(--on-accent);
}
nav a:hover {
    background-color: var(--on-accent);
    color: var(--accent);
}
code, kbd, samp, output {
    border-radius: 0.3em;
    border: 1px solid var(--accent);
    padding: 0.05em;
    font-family: monospace;
}
kbd {
    background-color: var(--gray);
    border: 1px solid var(--fg);
}
output {
        border: 1px solid var(--gray);
}
time {
    font-weight: bold;
}
/* Adapted from classlesscss. */
video, summary, input, select {
    outline:none;
}
details {
    margin-top: 1em;
    border-radius: 0.2em;
    border-color: var(--fg);
    border-style: solid;
    border-width: 0 0 3px 3px;
}
details summary ::marker {
    color: var(--bg);
}
details > :not(summary) {
    margin-left: 1em;
}
button, select, summary, input[type=submit], ::file-selector-button {
    font-size: inherit;
    color: var(--bg);
    background-color: var(--fg);
    border-radius: 0.2em;
    border-width: 1px;
    padding: 0.4em 0.8em;
    cursor: pointer;
    font-size: 1em;
}
summary {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
textarea, input:not([type=range]):not([type=submit]) {
    font-size: inherit;
    font: sans-serif;
    border-radius: 0.2em;
    border: 0.1em solid;
    border-color: var(--bg);
    border-bottom-color: var(--fg);
    border-left-color: var(--fg);
    padding: 0.4em 0.8em;
    color: var(--fg);
    background-color: var(--bg);
}
textarea {
  field-sizing: content;
}
fieldset select, input:not([type=checkbox]):not([type=radio]), textarea, button, meter, progress {
	display: block;
	width: 100%;
	margin: 0.4em 0;
}
button, select, input[type=submit]  {
	font-weight: bold;
}
button[disabled], input[disabled] {
    color: var(--gray);
    border-color: var(--gray);
}
fieldset {
    border-radius: 0.2em;
    border: var(--accent);
    padding: .5em 1em;
}
textarea:hover, input:not([type=checkbox]):not([type*='ra']):hover, select:hover, button:hover {
    border: 0.1em solid var(--accent);
}
textarea:focus {
	border: 0.1em solid var(--accent);
}
input:not([type=checkbox]):not([type*='ra']):focus {
	border: 0.1em solid var(--accent);
}

dialog {
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--accent);
    border-radius: 0.2em;
}

.note {
    border-radius: 0.2em;
    border: 0.1em solid var(--accent);
    padding: 0 1em;
    margin: 1em 0;
}


pre [token] {
    font-family: monospace;
}

/* Syntax highlighting .*/
pre [token$="let"],
pre [token="local"],
pre [token^="let"],
pre [token="var"],
pre [token$="lambda"],
pre [token^="λ" i],
pre [token$="function"],
pre [token="fn"],
pre [token*="def"],
pre [token="declare"],
pre [token="when"],
pre [token="unless"],
pre [token="then"],
pre [token^="if"],
pre [token="else"],
pre [token="elif"],
pre [token="switch"],
pre [token$="case"],
pre [token="while"],
pre [token="for"],
pre [token="until"],
pre [token*="with-"],
pre [token^="set"],
pre [token="return"],
pre [token="go"],
pre [token="try"],
pre [token="catch"],
pre [token="except"],
pre [token="finally"],
pre [token^="throw"],
pre [token="struct"],
pre [token="class"],
pre [token="end"],
pre [token^="<"]:not([token$="<"])
{
    font-weight: 600;
    color: var(--accent);
}

pre [token="t" i],
pre [token="nil" i],
pre [token="null" i],
pre [token="undefined"],
pre [token="true" i],
pre [token="false" i],
pre [token^=":"],
pre [token^="$"],
pre [token^="#:"],
pre [token^="&"]:not([token$="&"]),
pre [token$=":"]
{
    color: var(--accent);
}

/* Experiments in string highlighting. BROKEN, especially on C code. */
/* pre [token^="\""], */
/* pre [token^="\""] ~ :not([token$="\""]):has(~ [token$="\""]) */
/* { */
/*     font-weight: normal; */
/*     color: var(--accent); */
/* } */

/* pre [token$="\""] { */
/*     font-weight: normal; */
/*     color: var(--accent); */
/* } */