/* Local additions to lpdoc.css for the slide decks.
 *
 * This is a real stylesheet, not an html block inside the markdown: in one of
 * those the markdown parser is still reading, so the delimiters of a second
 * comment pair with the first one's and swallow the rules between them, a
 * child combinator comes out HTML-escaped, an at sign has to be doubled and
 * every brace escaped.  Here CSS is CSS.  The decks link this file with a
 * one-line html block, and the Makefile copies it into each generated
 * <doc>.html/ directory.
 */

/* The look of the LaTeX slides (red titles over a blue rule, coloured
   bullets, ...): comment this line out for lpdoc's plain look. It has to
   stay the first rule of the file. */
@import url("xdvislides.css");

/* ------------------------------------------------------------------ covers */
/* The cover and the mid-deck part pages are the same thing: the course name
   as a badge over the title, in the middle of the slide.  The name is the
   document's subtitle (cover) or a span the converter emits (part page), and
   both come after the title in the document, hence column-reverse. */

.lpdoc-slide-mode .lpdoc-slide:has(.lpdoc-cover-title):not(.lpdoc-slide-hide),
.lpdoc-slide-mode .lpdoc-slide:has(.partname):not(.lpdoc-slide-hide) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
}

.lpdoc-slide-mode div.lpdoc-cover-title {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

/* the badge is a span after the title here, so this one reverses (and it has
   to repeat :not(..) or the rule above, being more specific, wins) */
.lpdoc-slide-mode .lpdoc-slide:has(.partname):not(.lpdoc-slide-hide) {
    flex-direction: column-reverse;
}

.lpdoc-slide-mode .lpdoc-slide:has(.partname) h2,
.lpdoc-slide-mode h1.lpdoc-cover-h1 {
    font-size: 34px;
    text-align: center;
    margin: 10px 0px 0px 0px;
}

/* the stray line break lpdoc leaves after the subtitle */
.lpdoc-slide-mode .coursename + br { display: none; }

.coursename,
.partname {
    display: inline-block;
    margin-bottom: 14px;
    padding: 3px 14px;
    border: 1px solid var(--cartouche-border);
    border-radius: 999px;
    background-color: var(--cartouche-bg);
    color: var(--cartouche-fg);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- inline bits */
/* \fbox{..} inside a line of text: bold would be invisible on a formula, and
   most of these boxes are formulas. \ul{..} and \Underline{..} (class
   Underline: xdvislides.css draws it red, as the PDF does) and \underline{..}
   (class underline, LaTeX's own black one): neither markdown nor lpdoc has an
   underline. */

.boxed {
    border: 1px solid var(--fgdim);
    border-radius: 3px;
    padding: 0px 5px;
}

.underline, .Underline { text-decoration: underline; }

/* \begin{tt} .. \end{tt} around text (deck 2's clause listings, which line up
   their second column with control spaces, made non-breaking spaces): lpdoc's
   code font, without the chip inline code has, and at the text's size -- not
   inline code's 85%, which is for a few words among others: at it the
   listings were a fifth narrower than the PDF's, against the text. */
.ttfont {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

/* (Line art on the dark theme: lpdoc's own class, \image{F}{W}{}{lpdoc-lineart},
   which fixslides.py gives the deck figures; this file used to do it with a
   figinvert span around the image.) */

/* ----------------------------------------------------------- short rules */
/* \rule{10em}{1pt}, centered between two items (deck 7) */
.shortrule {
    display: inline-block;
    width: 10em;
    border-top: 1px solid var(--fgdim);
    vertical-align: middle;
}

/* ----------------------------------------------------------------- colours */
/* \textcolor{Orange}{..} and the others the decks use, as spans (tc-<name>).
   The decks colour by role -- deck 1: objects Orange, relations NavyBlue, the
   part being added to a specification ForestGreen, the + and - of a
   comparison ForestGreen and red. The values are those of deck 1's hand-made
   version, chosen to read on both themes, and so is the weight, which keeps
   thin coloured text readable. */
.tc-orange                 { color: #b45309; font-weight: 600; }
.tc-navyblue, .tc-blue     { color: #1d4ed8; font-weight: 600; }
.tc-forestgreen, .tc-green { color: #15803d; font-weight: 600; }
.tc-red                    { color: #b91c1c; font-weight: 600; }
.tc-brown                  { color: #92400e; font-weight: 600; }

:root[data-theme="dark"] .tc-orange                 { color: #fbbf24; }
:root[data-theme="dark"] .tc-navyblue,
:root[data-theme="dark"] .tc-blue                   { color: #7dd3fc; }
:root[data-theme="dark"] .tc-forestgreen,
:root[data-theme="dark"] .tc-green                  { color: #86efac; }
:root[data-theme="dark"] .tc-red                    { color: #fca5a5; }
:root[data-theme="dark"] .tc-brown                  { color: #d6a77a; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tc-orange                 { color: #fbbf24; }
    :root:not([data-theme="light"]) .tc-navyblue,
    :root:not([data-theme="light"]) .tc-blue                   { color: #7dd3fc; }
    :root:not([data-theme="light"]) .tc-forestgreen,
    :root:not([data-theme="light"]) .tc-green                  { color: #86efac; }
    :root:not([data-theme="light"]) .tc-red                    { color: #fca5a5; }
    :root:not([data-theme="light"]) .tc-brown                  { color: #d6a77a; }
}