/* Shared by the public reading column and the block editor. */
:root {
    --kf-reading-tint: #f7f2e9;
    --kf-reading-gold: #b18a48;
    --kf-reading-marker: #775924;
    --kf-reading-rule: #d8d1c5;
}

@media screen {
    [data-kf-theme="dark"] {
        --kf-reading-tint: #242c2d;
        --kf-reading-gold: #dfb878;
        --kf-reading-marker: #edcc90;
        --kf-reading-rule: #475052;
    }
}

:is(.kf-prose, .reading, .editor-styles-wrapper) :is(.is-style-kf-note, .is-style-kf-checklist) {
    box-sizing: border-box;
    margin-block: 1em 1.4em;
    padding: clamp(16px, 1.8vw, 26px) clamp(18px, 2.2vw, 32px);
    border-inline-start: 3px solid var(--kf-reading-gold);
    background-color: var(--kf-reading-tint);
    color: var(--ink, #162b3b);
    overflow-wrap: anywhere;
}

:is(.kf-prose, .reading, .editor-styles-wrapper) :is(ol, ul):is(.is-style-kf-note, .is-style-kf-checklist) {
    padding-inline-start: calc(clamp(18px, 2.2vw, 32px) + 1.55em);
}

:is(ol, ul):is(.is-style-kf-checklist, .is-style-kf-note) > li {
    padding-inline-start: .2em;
}

:is(ol, ul):is(.is-style-kf-checklist, .is-style-kf-note) > li + li {
    margin-block-start: .48em;
}

.is-style-kf-checklist > li::marker {
    color: var(--kf-reading-marker);
    font-weight: 700;
}

ul.is-style-kf-checklist > li::marker {
    content: "✓  ";
    content: "✓  " / "";
}

.is-style-kf-note > :first-child:not(li) { margin-block-start: 0; }
.is-style-kf-note > :last-child:not(li) { margin-block-end: 0; }

/* A standalone question or quotation should still read as part of the article. */
:is(.kf-prose, .reading, .editor-styles-wrapper) .is-style-kf-reflection {
    margin: 1.3em 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink, #162b3b);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 1.14rem + .75vw, 1.85rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -.018em;
    text-wrap: pretty;
}

.is-style-kf-reflection::before {
    content: "";
    display: block;
    inline-size: 2.5rem;
    margin-block-end: .6em;
    border-block-start: 2px solid var(--kf-reading-gold);
}

.is-style-kf-reflection :is(p, cite) { font-size: inherit; line-height: inherit; }
.is-style-kf-reflection p:last-of-type { margin-block-end: 0; }
.is-style-kf-reflection cite {
    display: block;
    margin-block-start: .65em;
    color: var(--muted, #485e6a);
    font: normal 600 .875rem/1.5 Manrope, Arial, sans-serif;
    letter-spacing: 0;
}

/* Keep each numbered step attached to the paragraph that explains it. */
.kf-prose .kf-procedure-step,
.kf-prose .kf-procedure-detail {
    padding-inline-start: clamp(14px, 1.5vw, 22px);
    border-inline-start: 2px solid var(--kf-reading-rule);
}

.kf-prose .kf-procedure-step {
    margin-block: 1.3em 0;
    padding-block-end: .25em;
    border-inline-start-color: var(--kf-reading-gold);
}

@media screen and (min-width: 781px) {
    .kf-outline-list { counter-reset: kf-chapter; }
    .kf-outline-list:not(.kf-outline-authored-numbers) > li:has(> a:not([href="#konzultace"])) { counter-increment: kf-chapter; }
    .kf-outline-list:not(.kf-outline-authored-numbers) > li > a:not([href="#konzultace"]) {
        position: relative;
        padding-inline-start: 2.7em;
    }
    .kf-outline-list:not(.kf-outline-authored-numbers) > li > a:not([href="#konzultace"])::before {
        content: counter(kf-chapter, decimal-leading-zero);
        content: counter(kf-chapter, decimal-leading-zero) / "";
        position: absolute;
        inset-inline-start: .65em;
        inset-block-start: 1.05em;
        color: var(--muted, #485e6a);
        font-size: .78em;
        font-variant-numeric: tabular-nums;
        line-height: 1.45;
    }
}

@media forced-colors: active {
    :is(.is-style-kf-note, .is-style-kf-checklist),
    .is-style-kf-reflection::before,
    .kf-prose .kf-procedure-step,
    .kf-prose .kf-procedure-detail { border-color: CanvasText; }
}

@media print {
    :is(.kf-prose, .reading) :is(.is-style-kf-note, .is-style-kf-checklist) {
        background: transparent;
        color: #111;
        border-color: #777;
    }
    :is(.kf-prose, .reading) .is-style-kf-reflection { color: #111; }
    .kf-prose .kf-procedure-step { break-after: avoid; }
}