/* step-precall.tsx: the case told in full, one quiet click under the situation, scrolling in its box so the page
   stays one screen. */
.kit .k-item-line p { margin: 0; }
.kit .k-item-more-toggle { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--item-blue); cursor: pointer; }
.kit .k-item-more-toggle:hover { text-decoration: underline; }
.kit .k-item-more-toggle:focus-visible { outline: 2px solid var(--item-blue); outline-offset: 3px; border-radius: 4px; }
.kit .k-item-more { max-height: clamp(120px, 100dvh - 590px, 300px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--k-fill); font-size: 15px; line-height: 1.55; color: var(--item-soft); }
.kit .k-item-more p { margin: 0; }
.kit .k-item-more b { color: var(--item-ink); }
.kit .k-item-more ul { margin: 0; padding-inline-start: 18px; }

/* the page of a case or a lesson sits on the app's dark full-bleed ground (the call's): it brings its own white */
.kit.k-precall { min-height: 100dvh; background: var(--k-panel, #fff); color: var(--k-ink); }
/* the lesson's parts: plain numbered lines between hairlines, no card; each opens the side panel on itself */
.kit .k-lesson-parts { display: grid; width: 100%; margin: 0 0 12px; padding: 0; list-style: none; }
.kit .k-lesson-parts > li { border-top: 1px solid var(--item-hair); }
.kit .k-lesson-parts > li:last-child { border-bottom: 1px solid var(--item-hair); }
.kit .k-lesson-parts button { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: start; color: var(--item-ink); cursor: pointer; transition: background-color .15s; }
.kit .k-lesson-parts button:hover { background: var(--k-fill); }
.kit .k-lesson-parts button:focus-visible { outline: 2px solid var(--item-blue); outline-offset: 2px; }
.kit .k-lesson-parts button > .k-icon { color: var(--item-quiet); }
.kit .k-lesson-parts-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tone-veil); font-size: 12.5px; font-weight: 600; color: var(--tone-ink); font-variant-numeric: tabular-nums; }
.kit .k-lesson-parts-name { overflow: hidden; font-size: 15.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.kit .k-lesson-parts-count { font-size: 12.5px; color: var(--item-quiet); white-space: nowrap; }

/* a lesson's part in the window at the centre (`StepDialog`): its points, each with a line of the tone */
.kit .k-lesson-points { display: grid; align-content: start; gap: 14px; margin: 0; padding: 4px 0; list-style: none; animation: k-item-fade .2s ease-out; }
.kit .k-lesson-points li { display: grid; gap: 3px; padding-inline-start: 14px; box-shadow: inset 2px 0 0 var(--tone-veil); }
.kit .k-lesson-points li b { font-size: 15px; font-weight: 600; color: var(--item-ink); }
.kit .k-lesson-points li span { font-size: 14px; line-height: 1.5; color: var(--item-soft); }
[dir="rtl"] .kit .k-lesson-points li { box-shadow: inset -2px 0 0 var(--tone-veil); }
.kit .k-dialog-go { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--k-fill); font: inherit; font-size: 14px; font-weight: 600; color: var(--item-ink); cursor: pointer; }
.kit .k-dialog-go.is-next { background: var(--tone-veil); color: var(--tone-ink); }
.kit .k-dialog-go:disabled { opacity: .4; cursor: default; }
[dir="rtl"] .kit .k-dialog-go .k-icon { transform: scaleX(-1); }
/* the whole case in the window: its paragraphs, the parties, what only you know, what you train */
.kit .k-case-full { display: grid; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--item-soft); }
.kit .k-case-full p { margin: 0; }
.kit .k-case-full b { color: var(--item-ink); }
.kit .k-case-full h3 { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--tone-ink); }
.kit .k-case-full ul { margin: 0; padding-inline-start: 18px; }

/* A LITTLE MORE COLOUR (Ale, 11 Oct: «leggermente, ma proprio leggermente più colore»): each kind its tone from the
   course page (`main-look.css`, learn · practice · assess), on the elements only, the kind's chip and the parts'
   numbers; never on the ground (Ale, 11 Oct: «il colore lo dobbiamo dare tramite bottoni o altro»); words stay ink */
/* the kind's colour of the course page's cards (`course-list.css`, the rows «Lezione», «Call», «Verifica»; Ale,
   11 Oct: «lezione blu, caso viola»): the blue, the violet, the amber */
.kit.k-precall { --tone: #0a84ff; --tone-ink: #0071e3; --tone-veil: color-mix(in srgb, var(--tone) 13%, transparent); }
.kit.k-precall.is-case { --tone: #8e5cf0; --tone-ink: #7a45e6; }
.kit.k-precall.is-exam { --tone: #e08a00; --tone-ink: #b56d00; }
:root:not([data-theme="light"]) .kit.k-precall { --tone-ink: color-mix(in srgb, var(--tone) 78%, #fff); }
.kit.k-precall .k-item-kicker { justify-self: start; padding: 5px 12px 5px 9px; border-radius: 99px; background: var(--tone-veil); color: var(--tone-ink); }
.kit.k-precall .k-item-kicker .doodle { color: var(--tone-ink); }

/* at night the page is the darkest black of the kit, not the raised grey (Ale, 10 Oct: «un nero più scuro») */
:root:not([data-theme="light"]) .kit.k-precall { background-color: var(--k-ground-2); }