body > div.error {
    background-color: #fdd;
    border: 0.1em solid #f88;
    padding: 0.3em;
}
body {
    font-family: sans-serif;
    max-width: 50em;
    margin: 0 auto;
    padding: 0 0.5em;
    background-color: #fbfbfb;
}
nav {
    padding: 0.5em 0;
}
main h1 {
    margin-bottom: 0;
}
main .subtitle {
    font-style: italic;
}
textarea {
    width: 100%;
}
button {
    display: block;
    margin: 0.7em 0 0 auto;
    padding: 0.2em 1em;
}
p > * {
    max-width: 100%;
}
table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}
th {
    text-align: left;
    background-color: #0000001a;
}
th, td {
    border: 1px solid #00000040;
    padding: 0.5em;
}

pre > code {
    padding: 1em;
    display: block;
    background-color: #00000008;
    border-radius: 0.5em;
}

#toc {
    padding: 1em;
    border-radius: 0.5em;
    background-color: #00000002;
    border: 1px solid #0000000f;
}

#toc > li {
    margin-left: 1.5em;
}

blockquote {
    padding: 0.5em 1em;
    margin: 0.5em 0;
    --accent-color: black;
    border-left: 0.7em solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    background-color: color-mix(in srgb, var(--accent-color) 5%, transparent);
    border-radius: 0.2rem;
}

.warning { --accent-color: red; }
.info    { --accent-color: #ffba00; }
.rule    { --accent-color: green; }
.def     { --accent-color: blue; }

code.language-bad {
    color: #f33;
    background-color: #f001;
}

code.language-good {
    color: #181;
    background-color: #0f01;
}

#preview {
    display: none;
    float: right;
    margin-right: -105%;
    width: 100%;
}

.pikchr-svg {
    margin: auto;
}

.article-list {
    display: grid;
    grid-template-columns: min-content 1fr;
}

main > time {
    display: block;
}

main > img {
    max-width: 100%;
    margin: 0 auto 0.5em;
}

time {
    font-style: italic;
    opacity: 50%;
}

.article-list time {
    text-wrap-mode: nowrap;
    padding-right: 0.5em;
}

figure > img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

figure > figcaption {
    text-align: center;
    opacity: 50%;
    margin: 1em 0;
}

/* The default textarea is 80 columns. Let's assume 1ch is about 0.5em.
   So 80 cols is about 40em. We need space for two of them, plus gap.
   So about 81em. Let's use that as a breakpoint.
*/
@media (min-width: 105em) {
    #preview {
        display: block;
    }
}

/* Callouts */
.callout {
    border-left: 0.3em solid var(--callout-color);
    padding: 0.5em 0.8em;
    margin: 0.5em 0;
}

.callout-body > :last-child {
    margin-bottom: 0;
}

.callout-title {
    color: var(--callout-color);
    display: flex;
    align-items: center;
}

.callout-title > * {
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0;
}

.callout-title-text {
    font-weight: 600;
    margin-left: 0.2em;
}

.callout-tip { --callout-color: darkgreen; }
.callout-note { --callout-color: blue; }
.callout-important { --callout-color: purple; }
.callout-warning { --callout-color: darkorange; }
.callout-caution { --callout-color: red; }

#TableOfContents {
    font-size: 1em;
    padding: 1px;
    margin-top: 1em;
    background-color: $boxbg;
    border-radius: 0.5em;
}

.alignright {
    float: right;
    margin: 0 0 0 1em;
}

/* Comments */
#comments input, #comments textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5em;
}

#comments input:focus,
#comments textarea:focus {
    border-left: 0.5em solid darkblue;
}

#comments textarea {
    resize: vertical;
    font-family: inherit;
    min-height: 8em;
}

#comments input[type="submit"] {
    padding: 0.5em 1em;
    width: auto;
    float: right;
    margin: 0.5em 0;
}

.comment-error {
    border: 1px solid #754a4a;
    background-color: #ffbbbb;
    padding: 0.4em;
}

.comment {
    border-bottom: 1px solid #ddd;
    margin: 1em 0;
    padding-bottom: 0.3em;
}

.comment .author { font-weight: bold; }
.comment .time { font-size: 0.6em; opacity: 60%; }
.comment .content {
    font-size: 0.9em;
    white-space: pre-wrap;  /* don't conflate newlines */
}

#comment-form {
    margin-top: 1em;
    overflow: auto;  /* clearfix hack because button floats */
}

#comment-form .fielderror {
    float: right;
    color: #754a4a;
    font-size: 0.8em;
}
#comment-form .error input,
#comment-form .error textarea {
    background-color: #ffeeee;
}

#comment-form img {
    display: inline;
    margin: 0;
    max-width: 100%;
}