/* ============================================================================
   components/objectives.css  --  learning-objective lists

   Pandoc example lists, (@), render as <ol class="example">, and numbering
   continues across lists with a start attribute (start="6", start="12", ...).
   The native list markers are kept, so the numbers always follow the source;
   this file only restyles them and gives them a gutter wide enough for two
   digits. Colors come from tokens.css, so dark mode needs no rule of its own.

   ol.example (0,1,1) outranks the :is(.example, ...) theorem-block rules in
   blocks.css (0,1,0), so this works whether or not those rules are scoped
   to div.example.
   ==========================================================================*/

ol.example {
    --role: var(--course-practice);
    margin: 0.5rem 0 1.75rem;
    padding: 0.35rem 1.1rem 0.35rem 2.9rem;
    /* left padding is the marker gutter: room for "22." plus a gap */
    list-style: decimal outside;
    border: 0;
    border-left: 3px solid var(--role);
    border-radius: 0 var(--course-radius) var(--course-radius) 0;
    background: color-mix(in srgb, var(--role) 5%, var(--course-paper));
}

ol.example>li {
    margin: 0;
    padding: 0.5rem 0 0.5rem 0.2rem;
    border-top: 1px solid var(--course-rule);
}

ol.example>li:first-child {
    border-top: 0;
}

ol.example>li::marker {
    color: color-mix(in srgb, var(--role) 85%, var(--course-ink));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The bold lead-in paragraph above each list: pull it closer to its list
   so the two read as one group. */
p:has(> strong:only-child):has(+ ol.example) {
    margin-bottom: 0;
}

/* Fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, white 50%, black)) {
    ol.example {
        background: var(--course-wash);
    }

    ol.example>li::marker {
        color: var(--role);
    }
}