/* 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;
}

html, 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"],
::file-selector-button
{
    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;
    }
}

section {
    padding: 0 0.3em;
}

form {
    padding: 1em 0;
}

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);
}

img {
    display: block;
    max-width: 100%;
    min-width: 20%;
    height: auto;
    max-height: 90vh;
    margin: 0 auto;
}
img:not(figure img):not(a img) {
    margin: 1em auto;
}
a:has(img) {
    display: block;
    margin: 0;
    padding: 0;
}
a img {
    border: 0.1em solid var(--bg);
    border-radius: 0.2em;
    margin: 0 auto;
}
a img:hover {
    border-color: var(--accent);
}

hr {
    border: 0.1em solid var(--accent);
}

h1 {
    font-size: 2em;
    word-break: break-word;
    overflow-wrap: anywhere;
}
h2 {
    font-size: 1.5em;
    word-break: break-word;
    overflow-wrap: anywhere;
}
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;
}
/* THIS IS A HACK because ed(1) scripts insert </p> before <ul>
   and it’s hard to circumvent. */
ul p:has(+ ul) {
    display: none;
}

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 {
    margin: 1em auto;
    border-collapse: collapse;
    border: 0.1em solid var(--fg);
    font-size: 1em;
}
.scrollable table {
    margin: 0 auto;
}
.scrollable {
    margin: 1em auto;
}
td, th {
    border: 1px solid var(--fg);
    background-color: var(--bg);
    text-align: left;
    font-family: monospace;
    padding: 0.2em;
}
th {
    font-weight: bold;
}
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);
}

nav, footer {
    padding: 0.5em 1em;
}
footer {
    border-top: 0.1em solid var(--fg);
}
nav {
    background-color: var(--accent);
    color: var(--on-accent);
}
nav a {
    margin: 0.2em;
    color: var(--on-accent);
}
nav a:hover {
    background-color: var(--on-accent);
    color: var(--accent);
}
nav #dark-mode-toggle,
nav #light-mode-toggle {
    accent-color: var(--bg);
}

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;
}
del {
    font-family: inherit;
}

/* 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: 0.1em;
    border-color: var(--bg);
    padding: 0.4em 0.8em;
    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 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: 0.1em solid 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;
}

/* Notes tangentially related to the content,
 * but slightly interrupting the narrative.
 * I might at some point split these into Example and other categories.
 * But there was no need for that yet. */
.note {
    border-width: 0.1em 0 0.1em 0.1em;
    border-top-left-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
    border-color: var(--accent);
    border-style: solid;
    padding: 0 1em;
    margin: 1em 0;
}

/* Scrollable containers, as in table-wrapping boxes.
 * Tables are not scrollable nor overflowable,
 * thus the <div class=scrollable> hack. */
.scrollable {
    overflow-x: auto;
    overscroll-behavior: contain;
}

/* “Skip to content” link.
 * Should be smart in only shown when keyboard-focused. */
.skiplink {
    position: absolute;
    transform: scale(0);
}
.skiplink:focus {
    position: static;
    width: auto;
    height: auto;
}

/* Buttons in code block captions.
 * No other uses intended. */
.code-button {
    width: auto;
    display: inline;
    margin: 0.2em;
    background-color: var(--accent);
    color: var(--on-accent);
    border-color: var(--on-accent);
}

/* Spoiler text.
 * Taken from https://stackoverflow.com/a/70820783 */
.spoiler {
  background-color: var(--fg);
  color: transparent;
  user-select: none;
}
.spoiler:hover,
.spoiler:focus,
.spoiler:active {
  background-color: inherit;
  color: inherit;
}

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="do"],
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);
}

pre [comment],
pre [comment] [token] {
    color: var(--gray);
    font-weight: normal;
}

/* 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); */
/* } */

@view-transition {
    navigation: auto;
}