/* article.css: Styles for Markdown articles (date line, code, lists, tables) */
.article-date {
    color: var(--slate);
    font-size: small;
}

main h4 {
    color: var(--blue);
    font-weight: normal;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

main li a,
main td a {
    color: var(--blue);
    text-decoration: none;
}

main li a:hover,
main td a:hover {
    color: var(--orange);
}

main p img {
    max-width: 100%;
    height: auto;
}

blockquote {
    max-width: var(--measure);
    margin: 0 auto 1rem;
    border-left: 3px solid var(--grey);
    padding-left: 1rem;
}

blockquote p {
    color: var(--slate);
}

/* ----- Lists: tighter than the chart pages' definition lists ----- */
main li {
    margin-bottom: 0;
}

/* ----- Numbered lists ----- */
main ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

main ol li {
    padding-left: 0.25rem;
}

/* ----- Tables ----- */
main table {
    width: var(--measure);
    max-width: 100%;
    margin: 0 auto 1rem;
    border-collapse: collapse;
}

main th,
main td {
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--grey);
    text-align: left;
}

main th {
    color: var(--blue);
    font-weight: 500;
}

/* ----- Maths: a long equation scrolls sideways rather than running off a phone ----- */
.arithmatex {
    max-width: var(--measure);
    margin: 0 auto 1rem;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ----- Code ----- */
code,
pre,
pre * {
    font-family: var(--mono);
}

main code {
    font-size: 0.9em;
    background: #fff;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
}

.highlight {
    max-width: var(--measure);
    margin: 0 auto 1rem;
    background: #fff;
    border: 1px solid var(--grey);
    border-radius: 0.25rem;
    padding: 1rem;
    overflow-x: auto;
}

.highlight pre {
    line-height: 1.5rem;
}

.highlight code {
    font-size: 0.9rem;
    padding: 0;
}

/* Pygments tokens, in the site palette */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .ch, .highlight .cs {
    color: var(--slate);
    font-style: italic;
}

.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kc, .highlight .kt, .highlight .ow,
.highlight .nb, .highlight .bp, .highlight .nt {
    color: var(--blue);
    font-weight: 500;
}

.highlight .nf, .highlight .fm, .highlight .nc, .highlight .nn, .highlight .nd {
    color: var(--blue);
}

.highlight .s, .highlight .s1, .highlight .s2, .highlight .sa, .highlight .sb, .highlight .sd, .highlight .se,
.highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss, .highlight .dl, .highlight .na {
    color: var(--green);
}

.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo, .highlight .mb, .highlight .il {
    color: var(--orange);
}

.highlight .gp {
    color: var(--slate);
}

.highlight .err {
    color: var(--dark);
    border: none;
}