.perseus-widget-passage-container {
    @line-height: 22px;

    .perseus-widget-passage {
        line-height: @line-height;
        margin: 22px;
        position: relative;

        div.paragraph {
            font-family: KaTeX_Main, Times, "Times New Roman", serif;
        }
    }
    .katex {
        line-height: @line-height - 2;
    }
    .passage-title div.paragraph {
        font-size: 17px;
        font-weight: 700;
        margin: 0 0 10px;
    }
    .passage-text div.paragraph {
        font-size: 17px;
        line-height: @line-height;
        margin: 0;
        text-indent: 20px;
        span {
            text-indent: 0;
        }
    }
    .footnotes {
        margin-top: 22px;
        div.paragraph {
            font-size: 14px;
            margin: 0;
        }
    }
    .perseus-highlight {
        background-color: #FFFABE;
    }
    .perseus-review-highlight {
        background-color: #EEE7B2;
    }
    .perseus-passage-square-label,
    .perseus-passage-circle-label,
    .perseus-passage-bracket-label {
        // We want these to display the same inside the passage and
        // inside the instruction text
        font-family: Times, "Times New Roman", serif;
        font-size: 17px;
    }

    .line-numbers {
        font-size: 12px;
        font-style: italic;
        font-weight: 600;
        position: absolute;
        text-align: right;

        // When we suspect the passage widget has resized (e.g. on window
        // resize), we re-render the line numbers. We throttle this behavior,
        // in case there's e.g. frequent window resizes, which is important for
        // performance, but sometimes causes us to be a bit slow to add new
        // line numbers or delete extra line numbers. This usually isn't
        // noticeable, unless the extra line numbers leak beyond the passage
        // widget and into other content, in which case it's incredibly
        // noticeable and bad.
        //
        // So, we set the `.line-numbers` element's height to not exceed the
        // passage widget's height, and give it `overflow: hidden`. This way,
        // when temporarily have too many line numbers, they'll stay hidden
        // inside the passage widget and avoid conflicting with other content.
        //
        // However, it's invalid to set `overflow-y: hidden` and
        // `overflow-x: visible` (bleh), so hiding our y-overflow risks also
        // risks hiding part of our right-aligned italicized text, because
        // italicized text often renders a bit beyond its layout box.
        //
        // We therefore provide `font-size` worth of extra padding along the
        // right edge (12px), and adjust all other sizing and positioning
        // values accordingly. That's more than we actually need, but it feels
        // like a pretty safe, future-proof value :)
        max-height: 100%;
        overflow: hidden;
        padding-right: 12px;
        left: -40px - 12px;
        width: 25px + 12px;

        // Make sure each line-number takes up a full line
        span {
            display: block;
            line-height: @line-height;

            // Align with .text-content baseline.
            position: relative;
            top: 2px;

            visibility: hidden;
        }

        // Show every 5th line number, as well as the "Line" text
        span:nth-of-type(5n),
        .line-marker {
            visibility: visible;
        }
    }
}

.perseus-widget-passage-editor {

    .perseus-single-editor {
        font-family: Times, "Times New Roman", serif;

        // Give writers a bit more space by moving the textarea over to be
        // flush with the left edge of the editor box.
        margin-left: -11px;
    }

    .perseus-textarea-pair textarea {
        font-size: 13px;
        line-height: 17px;
    }
}

body.sat-section {
    .perseus-widget-passage {
        margin-top: 0;
    }
}