@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap');
/* ^ must be the first rule in the file -- CSS ignores @import after any other rule. */

/* readable.css -- typography overrides for long-form prose pages.
 *
 * Link this AFTER balletstyles.css (or balletlstyles.css); it only overrides
 * the handful of rules that control measure and text size, and inherits
 * everything else -- colors, headings, link treatment, lists.
 *
 *   <link rel="stylesheet" href="balletstyles.css" type="text/css">
 *   <link rel="stylesheet" href="readable.css" type="text/css">
 *
 * Why these values:
 *
 *   font-size    balletstyles sets 11px, from an era of 1024x768 displays.
 *                17px is roughly what a modern browser's own default (16px)
 *                would give, and is legible on a retina panel at arm's length.
 *
 *   line-height  1.55 unitless rather than a fixed 17px, so it scales with the
 *                font instead of crushing the lines when the size goes up.
 *
 *   max-width    the old `width: 66ex` is a measure of about 45 characters --
 *                very narrow, which is what makes the column a ribbon on a wide
 *                screen. 34em at this size is ~70 characters, the usual target
 *                for comfortable reading. It is a MAX, so narrow windows and
 *                phones just get the full width.
 */

#onecol,
#singlemiddlecol,
#onecolwide {
    font-family: 'Fira Sans', Verdana, Geneva, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;

    /* Replace the fixed, font-coupled width with a responsive measure. */
    width: auto;
    max-width: 34em;

    /* The old rule floated this left inside a 5% margin. Nothing floats
     * beside it on these pages, so the float only complicated matters. */
    float: none;
    margin: 0 5%;
    text-align: left;
}

/* Headings scale from the body size rather than sitting at a fixed pixel
 * value, so bumping font-size above keeps the hierarchy intact. */
#onecol h1,
#singlemiddlecol h1 {
    font-family: inherit;
    font-size: 1.6em;
    line-height: 1.25;
}

#onecol h2,
#singlemiddlecol h2 {
    font-family: inherit;
    font-size: 1.25em;
    line-height: 1.3;
}

/* The base sheet pins several elements at 11px with unscoped element
 * selectors -- `ul, ol, li, dt, td` and `blockquote`. Re-inherit all of them.
 *
 * The CONTAINERS matter as much as the items: overriding `li` alone is not
 * enough, because `inherit` then takes the size from the `ol` or `ul` parent,
 * which the base sheet has left at 11px. List text stays small and looks like
 * the override failed. Every element in that base rule has to appear here.
 */
#onecol ul, #onecol ol, #onecol li, #onecol dl, #onecol dt, #onecol dd,
#onecol p, #onecol table, #onecol td, #onecol th, #onecol blockquote,
#singlemiddlecol ul, #singlemiddlecol ol, #singlemiddlecol li,
#singlemiddlecol dl, #singlemiddlecol dt, #singlemiddlecol dd,
#singlemiddlecol p, #singlemiddlecol table, #singlemiddlecol td,
#singlemiddlecol th, #singlemiddlecol blockquote {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* h1 is pinned at 11px by the base sheet, and h2-h6 at sizes from 22px to
 * 62px that have nothing to do with this content. The h1/h2 rules above set
 * the two these pages actually use; catch the rest so a stray heading does
 * not arrive at 40px. */
#onecol h3, #onecol h4, #onecol h5, #onecol h6,
#singlemiddlecol h3, #singlemiddlecol h4,
#singlemiddlecol h5, #singlemiddlecol h6 {
    font-family: inherit;
    font-size: 1.1em;
    line-height: 1.35;
}

/* #onecolwide is the wrapper around code examples -- `<div id="onecolwide">`
 * holding a `<p><tt>...</tt></p>`. The base sheet gives it `width: 132ex;
 * float: left; font-size: 11px`, so without the rule above its contents stayed
 * at the old size while the prose around them grew, and the 132ex width fought
 * the narrower measure of the text. Note the page reuses this id many times
 * over, which is invalid HTML but works everywhere; `#onecolwide` matches all
 * of them. */
#onecolwide {
    float: none;
    margin: 0.6em 0 0.9em 2em;

    /* These blocks hold code -- BibTeX entries, \cite lines -- where a line
     * break carries meaning. They are deliberately allowed to run PAST the
     * right edge of the text measure rather than wrap inside it, because a
     * soft wrap in the middle of a BibTeX field reads as a second field.
     * `width: max-content` makes the block exactly as wide as its longest
     * line; on a wide screen that reaches into the empty margin, which is
     * free space anyway. */
    width: max-content;
    max-width: 90vw;    /* never wider than the window */
    overflow-x: auto;   /* and scroll within the block if it still does not fit */
}

#onecolwide p, #onecolwide tt, #onecolwide code, #onecolwide pre {
    font-size: inherit;
    line-height: inherit;

    /* Lines break at <br/> and nowhere else. NOT `white-space: pre` -- these
     * blocks break lines with explicit <br/> tags while the HTML source is
     * indented for readability, so `pre` would resurrect that indentation and
     * double the breaks. `nowrap` leaves the <br/> tags doing the work and
     * only suppresses the soft wrapping. */
    white-space: nowrap;
}

/* Monospace runs render noticeably smaller than surrounding prose in most
 * browsers' default stacks, so pull them back up to just under the body size
 * rather than leaving them at the browser's monospace default. */
#onecol code, #onecol tt, #onecol pre,
#singlemiddlecol code, #singlemiddlecol tt, #singlemiddlecol pre,
#onecolwide code, #onecolwide tt, #onecolwide pre {
    /* Fira Sans is proportional; code must not inherit it. */
    font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: 0.94em;
}

/* On a phone, drop the side margin to something that does not waste a third
 * of a small screen. */
@media (max-width: 40em) {
    #onecol,
    #singlemiddlecol {
        margin: 0 1.25em;
    }
}

/* Short code spans that contain a hyphen must not break at it. A line break
 * between the two hyphens of `--` is worse than useless on a page whose whole
 * subject is the difference between - and -- and ---.
 *
 * Applied as a class rather than to `tt` wholesale, deliberately: these pages
 * also carry inline <tt> runs of 100-170 characters (whole BibTeX entries
 * quoted mid-sentence), and making those unbreakable would push them clean off
 * the screen. Only short spans get it. The content stays literal hyphens, so
 * copy-pasting `--` into a .tex file still gives you two hyphens. */
.nb {
    white-space: nowrap;
}