/* Shared style of blog posts. Link it after any Prism theme so the code font below wins. */

body {
    max-width: 50em;
    margin-left: 1em;
}

table, th, td {
    border: solid 1px black;
    border-collapse: collapse;
}

th, td {
    padding: 2px 6px;
}

details > summary {
    cursor: pointer;
}

details {
    background-color: #eeeeee;
    padding: 4px;
    margin: 0;
    box-shadow: 1px 1px 2px #bbbbbb;
}

img {
    max-width: 100%;
}

/* A figure row sets its figures side by side at equal widths, three to a row in the 50em column. On a phone
   narrower than three 200px figures, the row wraps to fewer figures per line. */
.figure-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.figure-row img {
    flex: 1 1 200px;
    min-width: 0;
}

/* Wide code, tables, and equations scroll inside themselves so the page keeps the width of a phone screen. */
pre {
    overflow-x: auto;
}

table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

mjx-container[display="true"] {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

/* Inline code and code blocks share one monospace font at 0.85em, so a 16px body sets code at 13.6px. */
code, pre {
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85em;
}

/* Code inside a block inherits the size of the block, so the two sizes do not multiply. */
pre code {
    font-size: 1em;
}

/* Code blocks sit on the white page and line up with the text, set apart by their monospace font. The Prism
   theme would otherwise set its own font at the full body size with a beige box and a white text shadow. */
pre[class*="language-"] {
    font-size: 0.85em;
    background: #ffffff;
    padding: 0;
    margin: 1em 0;
    line-height: 1.4;
}

code[class*="language-"], pre[class*="language-"] {
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    text-shadow: none;
}

code[class*="language-"] {
    font-size: 1em;
}