/* The page of one step (step.js), on the kit (kit/kit.css, kit/step-detail.css, kit/step-precall.css). The rules the
   learner app kept outside the kit for these pages, copied as they are: corporate's item editor cards (styles.css
   «corporate's item editor on a step's page»), the kit's window (styles.css «the kit's window at the centre»), the
   step page's fixes (v2.css), the day's words (light.css). Everything under `.kit`, so no other page of SOLVE changes.
   Marked «here» are the few lines SOLVE adds. */

/* ---------- the page on its own (here): the whole screen, as the learner app's precall ---------- */
.kit.k-precall { font-family: var(--k-sans); }
.kit.k-precall a { text-decoration: none; }
/* the entry test's tone (here): SOLVE's green of the entry test (app.css --course), beside step-precall.css's three */
.kit.k-precall.is-test { --tone: #12a86a; --tone-ink: #0f8a57; }
:root:not([data-theme="light"]) .kit.k-precall.is-test { --tone: #3ddc97; }

/* ---------- styles.css: corporate's item editor on a step's page (item-editor-v8 + workspace.css) ---------- */
.kit .ss-ed-cards { display: grid; gap: 16px; max-width: 620px; margin-top: 24px; }
.kit .ss-ed-card { padding: 22px 26px 12px; border-radius: 26px; background: var(--k-panel, #1c1c1e); box-shadow: 0 0 0 1px var(--k-line-soft, rgb(255 255 255 / .06)); }
.kit .ss-ed-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.kit .ss-ed-card-head h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.005em; color: var(--k-ink); }
.kit .ss-ed-card-head small { margin-left: auto; font-size: 13px; color: var(--k-ink-3); }
.kit .ss-ed-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--k-fill-2); color: var(--k-ink); }
.kit .ss-setting { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; }
.kit .ss-setting + .ss-setting { border-top: 1px solid var(--k-line-soft, rgb(255 255 255 / .07)); }
.kit .ss-setting-main { display: grid; gap: 2px; min-width: 0; }
.kit .ss-setting-main b { font-size: 14.5px; font-weight: 500; color: var(--k-ink); }
.kit .ss-setting-main small { font-size: 12.5px; color: var(--k-ink-3); }
.kit .ss-ed-seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--k-fill-2); box-shadow: inset 0 0 0 1px var(--k-line-soft, rgb(255 255 255 / .07)); }
.kit .ss-ed-seg button { height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--k-ink-3); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.kit .ss-ed-seg button:hover { color: var(--k-ink); background: var(--k-fill); }
.kit .ss-ed-seg button[aria-pressed="true"], .kit .ss-ed-seg button[aria-pressed="true"]:hover { background: var(--k-ink); color: var(--k-ground, #111); box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.kit .ss-ed-card .ss-switch { flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.kit .ss-ed-card .ss-switch[aria-checked="true"] .k-item-switch { background: #0a84ff; }
.kit .ss-ed-card .ss-switch[aria-checked="true"] .k-item-switch::after { transform: translateX(16px); }
.kit .ss-setting.is-stack { flex-direction: column; align-items: flex-start; gap: 12px; }
.kit .ss-ed-range { flex: none; display: inline-flex; align-items: center; gap: 12px; }
.kit .ss-ed-range small { font-size: 12.5px; color: var(--k-ink-3); white-space: nowrap; }
.kit .ss-ed-range b { min-width: 52px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--k-ink); }
.kit .ss-ed-range input { -webkit-appearance: none; appearance: none; width: 160px; height: 6px; margin: 0; border-radius: 6px; background: linear-gradient(90deg, var(--k-ink) var(--v), var(--k-fill-2) var(--v)); cursor: pointer; }
.kit .ss-ed-range.is-time input { width: 180px; }
.kit .ss-ed-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3), 0 0 0 .5px rgb(0 0 0 / .1); }
.kit .ss-ed-range input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; }
.kit .ss-prose-f { display: grid; gap: 8px; padding: 12px 0; }
.kit .ss-prose-f + .ss-prose-f { border-top: 1px solid var(--k-line-soft, rgb(255 255 255 / .07)); }
.kit .ss-prose-f > span { font-size: 12.5px; font-weight: 600; color: var(--k-ink-3); }
.kit .ss-ed-prose { width: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: none; resize: none; font: inherit; font-family: var(--k-serif, Newsreader, serif); font-size: 18px; line-height: 1.45; color: var(--k-ink); outline: 0; field-sizing: content; }
.kit .ss-ed-tabs { justify-self: start; display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--k-fill); box-shadow: 0 10px 30px -18px rgb(0 0 0 / .6); }
.kit .ss-ed-tabs button { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--k-ink-3); cursor: pointer; white-space: nowrap; transition: color .15s, background-color .2s; }
@media (hover: hover) { .kit .ss-ed-tabs button:hover { color: var(--k-ink); } }
.kit .ss-ed-tabs button[aria-selected="true"] { background: var(--k-panel, #1c1c1e); color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line-soft, rgb(255 255 255 / .07)), 0 1px 3px rgb(0 0 0 / .3); }
.kit .ss-ed-card { animation: ss-rise .4s var(--k-out, ease); }
.kit .ss-ed-card-head { margin-bottom: 10px; }
.kit .ss-ed-card-head h3 { font-family: var(--k-serif, Newsreader, serif); font-size: 24px; font-weight: 400; letter-spacing: -.01em; }
.kit .ss-ed-ic { background: rgb(10 132 255 / .18); color: #8cc4ff; }
@keyframes ss-rise { from { opacity: 0; transform: translateY(8px); } }
.kit .ss-switch { padding: 6px; border: 0; background: none; cursor: pointer; }
.kit .ss-switch .k-item-switch { display: inline-block; vertical-align: middle; }
.kit .ss-switch[aria-checked="true"] .k-item-switch { background: #0a84ff; }
.kit .ss-switch[aria-checked="true"] .k-item-switch::after { transform: translateX(16px); }
.kit.k-precall.is-check .k-item-content { margin-top: 8px; }
/* v2.css: who you face, and the note under the cards */
.kit .ss-ed-who { display: inline-flex; align-items: center; gap: 10px; }
.kit .ss-ed-who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.kit .ss-ed-who small { color: var(--k-ink-3); }
.kit .ss-ed-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--k-ink-3); }

/* a shared step's values, shown and not changed (here): the controls keep their look and do not move */
.kit .ss-ed-cards.is-read .ss-ed-card :is(.ss-ed-seg button, .ss-switch, input) { cursor: default; pointer-events: none; }
.kit .ss-ed-cards.is-read .ss-ed-range input:disabled { opacity: 1; }

/* ---------- v2.css: the step page's own fixes ---------- */
/* a lesson's door says it, without a choice */
.kit .k-item-presence.is-only { padding: 7px 16px; font-size: 13px; color: #fff; }
.kit .k-item-presence.is-only b { font-weight: 600; }
/* a step still being written: its way in says so */
.kit .k-item-meet .k-item-join.is-wip { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; opacity: 1; }
/* what the entry test showed known: the lesson's own parts marked, «Rifai tutta la lezione» */
.kit .k-item-known { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(61, 220, 151, .1); color: #3ddc97; font-size: 14px; line-height: 1.45; }
.kit .k-item-known > span { flex: 1 1 220px; color: var(--item-soft, inherit); }
/* styles.css .ghost.sm, on the kit's inks (here: SOLVE's .ghost is not the learner app's) */
.kit .k-ghost { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--k-fill); box-shadow: inset 0 0 0 1px var(--k-line-soft); font-size: 13px; font-weight: 550; color: var(--k-ink); white-space: nowrap; }
.kit .k-ghost:hover { background: var(--k-fill-2); }
.kit .k-ghost:disabled { opacity: .5; cursor: default; }
/* plans.css .pl-door-note: one line under the door */
.kit .k-item-door-note { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--item-quiet); text-align: center; }
/* the door keeps its picture's size: its line sits under it, room kept for two lines (here) */
.kit .k-item-door:has(> .k-item-door-note) { margin-bottom: 44px; }
.kit .k-item-door > .k-item-door-note { position: absolute; top: 100%; left: 0; right: 0; }
/* the quiet line beside nothing else (here, from step-detail.css .k-item-goes-line): done, «Parto da zero» */
.kit .k-item-goes-line .k-icon { color: var(--tone-ink); }
/* a step's page drawn again where it is: no entrance played again, the face held */
.kit.k-precall.is-steady .k-item-door, .kit.k-precall.is-steady .ss-ed-card, .kit.k-precall.is-steady .k-item-hero > * { animation: none; }
/* the words as tall as the face and no taller: what does not fit scrolls inside its own card */
@media (min-width: 961px) {
  .kit.k-precall .k-item-copy { display: flex; flex-direction: column; align-items: flex-start; max-height: min(680px, calc(100dvh - 170px)); }
  .kit.k-precall .k-item-copy > .k-item-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .kit.k-precall .k-item-content > .ss-ed-cards { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 0; }
  .kit.k-precall .k-item-content > .ss-ed-cards > .ss-ed-card { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .kit.k-precall .k-item-content > .ss-ed-cards > .ss-ed-tabs { flex: none; }
  .kit.k-precall .k-item-hero { align-items: start; }
  .kit.k-precall .k-item-copy { padding-top: 6px; }
}
.kit.k-precall .k-item-content .ss-ed-tabs { max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
.kit.k-precall .k-item-content .ss-ed-tabs::-webkit-scrollbar { display: none; }
.kit.k-precall .k-item-content .ss-ed-tabs button { flex: none; padding: 0 15px; }
/* the step page on a phone (390 px): the column may shrink, the segments wrap, the kicker goes to a second line whole */
@media (max-width: 640px) {
  .kit .k-item-hero, .kit .k-item-copy, .kit .k-item-content, .kit .ss-ed-cards, .kit .ss-ed-card, .kit .ss-setting { min-width: 0; max-width: 100%; }
  .kit .k-item-copy h1 { overflow-wrap: anywhere; }
  .kit .ss-ed-seg { flex-wrap: wrap; max-width: 100%; }
  .kit .ss-ed-seg > button { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .kit .ss-ed-range.is-time input { width: 120px; }
  .kit.k-precall .k-item-kicker { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }
}

/* ---------- light.css: the day's words on a lesson's and a check's page ---------- */
:root[data-theme="light"] .kit { --known: color-mix(in srgb, #12925e 82%, #000); --known-veil: rgb(18 146 94 / .1); }
:root[data-theme="light"] .kit .k-item-known { background: var(--known-veil); color: var(--known); }
:root[data-theme="light"] .kit .ss-ed-ic { color: var(--k-blue-text); background: var(--k-blue-veil); }
:root[data-theme="light"] .kit .ss-ed-tabs { box-shadow: 0 10px 30px -18px rgb(0 12 31 / .3); }
:root[data-theme="light"] .kit .ss-ed-tabs button[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--k-line-soft), 0 1px 3px rgb(0 12 31 / .12); }
:root[data-theme="light"] .kit .ss-ed-seg button[aria-pressed="true"], :root[data-theme="light"] .kit .ss-ed-seg button[aria-pressed="true"]:hover { box-shadow: 0 1px 3px rgb(0 12 31 / .2); }
:root[data-theme="light"] .kit.k-precall { --tone-ink: color-mix(in srgb, var(--tone) 70%, #000); }
:root[data-theme="light"] .kit .k-item { --item-quiet: color-mix(in srgb, var(--k-ink) 64%, transparent); }
:root[data-theme="light"] .kit .ss-ed-tabs button { color: var(--k-ink-2); }

/* a phone: the four tabs of a roleplay all in view, on two lines if they must (they scrolled, «Impostazioni» cut) */
@media (max-width: 640px) {
  .kit.k-precall .k-item-content .ss-ed-tabs { display: flex; flex-wrap: wrap; overflow: visible; border-radius: 22px; }
  .kit.k-precall .k-item-content .ss-ed-tabs button { height: 36px; padding: 0 12px; font-size: 14px; }
}
/* the editable cards (4 Nov): the number of questions, a «−» and a «+» */
.kit .ss-ed-step { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--k-fill-2); box-shadow: inset 0 0 0 1px var(--k-line-soft, rgb(255 255 255 / .07)); }
.kit .ss-ed-step button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; font-size: 16px; color: var(--k-ink); cursor: pointer; }
@media (hover: hover) { .kit .ss-ed-step button:hover:not(:disabled) { background: var(--k-fill); } }
.kit .ss-ed-step button:disabled { opacity: .3; cursor: default; }
.kit .ss-ed-step output { min-width: 28px; text-align: center; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--k-ink); }
.kit .ss-ed-prose::placeholder { color: var(--k-ink-3); }
@media (max-width: 640px) { .kit .ss-ed-range input { width: 120px; } .kit .ss-ed-range.is-time input { width: 140px; } .kit .ss-setting { flex-wrap: wrap; } }
/* the roleplay's own words as the learner app has them (styles.css .ss-ed-prose): plain serif lines between hairlines,
   a blue underline while writing (Ale, 4 Nov: «prendi esattamente quello del sito degli studenti») */
.kit .ss-ed-prose:focus { outline: none; box-shadow: 0 1px 0 #0a84ff; }
/* a shared step's settings, set by its author: read, not edited */
.kit .ss-ed-cards.is-read textarea.ss-ed-prose { margin-top: 0; padding: 0; background: none; box-shadow: none; cursor: default; }
.kit .ss-ed-cards.is-read .ss-ed-step button, .kit .ss-ed-cards.is-read .ss-ed-seg button:not([aria-pressed="true"]) { opacity: .45; }
.kit .ss-ed-cards.is-read button:disabled, .kit .ss-ed-cards.is-read input:disabled { cursor: default; }
.kit .ss-ed-note.is-set-by { margin: 0 0 4px; font-weight: 600; color: var(--k-ink-2, var(--k-ink)); }

/* a roleplay: no line under the title, «Fatta» beside the kind, and the card reaching the door's foot (Ale, 4 Nov) */
.kit .k-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kit .k-item-top .k-item-goes-line { padding: 4px 10px; }
@media (min-width: 961px) {
  .kit.k-precall .k-item.is-roomy .k-item-copy { height: min(680px, calc(100dvh - 170px)); }
  .kit.k-precall .k-item.is-roomy .k-item-content > .ss-ed-cards > .ss-ed-card { flex: 1 1 auto; }
}
/* «Chi l'ha fatto» under the page, the width of both columns: in the words' column it squeezed the situation (4 Nov) */
.kit .k-item > .k-item-extra { margin-top: 40px; max-width: 760px; }
/* the title on one line on every step's page (fitTitle steps the size down; past its floor, «…») */
.kit .k-item-copy h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-wrap: nowrap; line-height: 1.2; padding-bottom: .06em; }
.kit .k-item-copy { width: 100%; }

/* a lesson is voice only, yet its teacher is shown as is: no grey, no dimming (Ale, 4 Nov) */
.kit .k-item-door.is-lesson .k-item-portrait img { filter: none; }
/* «Chi sei tu»: our words, read only, the same serif line as the others */
.kit .ss-prose-f.is-fixed .ss-ed-prose { margin: 0; color: var(--k-ink); }
.kit .ss-ed-val { font-size: 14px; font-weight: 550; color: var(--k-ink); white-space: nowrap; }
/* the tabs hug their buttons on every step's page, two or four of them, never stretched across the column (Ale, 4 Nov) */
.kit .ss-ed-cards > .ss-ed-tabs { align-self: flex-start; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.kit .ss-ed-cards { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.kit .ss-ed-cards > * { min-width: 0; max-width: 100%; }
.kit .ss-ed-cards > .ss-ed-tabs button { flex: none; }

/* ---------- the lesson's and the entry test's cards (Ale, 8 Nov: ~/orca/solve-step-cards-mock, lesson «2 · Anello»,
   test «3 · Passi in fila»): one surface, thin lines, the app's tokens ---------- */
.kit .ss-ed-card.lx, .kit .ss-ed-card.tb { --rail: color-mix(in srgb, var(--k-ink) 10%, transparent); --ease: cubic-bezier(.22, .61, .36, 1); display: flex; flex-direction: column; padding: 28px 30px 22px; }
:root:not([data-theme="light"]) .kit { --known: #3ddc97; --known-veil: rgba(61, 220, 151, .15); }
.kit .ss-ed-card.lx > *, .kit .ss-ed-card.tb > * { flex-shrink: 0; }
.kit .ss-ed-card.lx .ss-ed-card-head, .kit .ss-ed-card.tb .ss-ed-card-head { margin-bottom: 14px; }
.kit .ss-ed-card.lx .ss-ed-card-head small, .kit .ss-ed-card.tb .ss-ed-card-head small { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kit .lx-lead { margin: 0 0 24px; max-width: 52ch; font-size: 14.5px; line-height: 1.6; color: var(--item-soft, var(--k-ink-3)); text-wrap: pretty; }
.kit .lx .ss-ed-note { margin-top: 4px; }

/* the lesson: its parts as an index, a small ring on a hairline that runs through them */
.kit .lx-parts { display: grid; gap: 4px; margin: 0 -12px; padding: 0; list-style: none; }
.kit .lx-part { position: relative; animation: lx-in .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 80ms); }
@keyframes lx-in { from { opacity: 0; transform: translateY(6px); } }
.kit .lx-part:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 29.5px; top: 41px; bottom: -15px; width: 1px; background: var(--rail); }
.kit .lx-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; align-items: start; gap: 14px; width: 100%; padding: 14px 14px 14px 12px; border: 0; border-radius: 16px; background: none; font: inherit; color: var(--k-ink); text-align: start; cursor: pointer; transition: background-color .25s; }
.kit .lx-row.is-still { cursor: default; }
@media (hover: hover) { .kit button.lx-row:hover { background: var(--k-fill); } }
.kit .lx-part.is-open .lx-row { background: none; }
.kit .lx-row:focus-visible { outline: 2px solid var(--tone); outline-offset: -2px; }
.kit .lx-txt { display: grid; gap: 5px; min-width: 0; padding-top: 2px; }
.kit .lx-txt b { font-size: 15.5px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
.kit .lx-chev { display: grid; align-items: center; height: 25px; color: var(--k-ink-3); transition: transform .3s var(--ease), color .2s; }
.kit .lx-row:hover .lx-chev { color: var(--k-ink); }
.kit .lx-part.is-open .lx-chev { transform: rotate(180deg); }
.kit .lx-n { position: relative; z-index: 1; display: grid; place-items: center; justify-self: center; width: 25px; height: 25px; border-radius: 50%; background: var(--k-panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-ink) 16%, transparent); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--k-ink-3); transition: color .25s, background-color .25s, box-shadow .25s; }
.kit button.lx-row:hover .lx-n { box-shadow: inset 0 0 0 1px var(--tone); color: var(--tone-ink); }
.kit .lx-part.is-open .lx-n { background: var(--tone); box-shadow: none; color: var(--k-on-blue); }
/* a part the entry test showed known: a green tick in the ring, «La sai già» */
.kit .lx-part.is-known .lx-n { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--known) 50%, transparent); color: var(--known); }
.kit .lx-part.is-known.is-open .lx-n { background: var(--known); color: var(--k-panel); }
.kit .lx-part.is-known .lx-txt b { color: var(--k-ink-3); }
.kit .lx-tag { align-self: start; margin-top: 2px; padding: 3px 9px; border-radius: 99px; background: var(--known-veil); font-size: 12px; font-weight: 600; color: var(--known); white-space: nowrap; }
/* opened in place: the height grows from nothing, the points slide in under the title */
.kit .lx-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease), visibility 0s .4s; visibility: hidden; }
.kit .lx-more > div { overflow: hidden; min-height: 0; }
.kit .lx-part.is-open .lx-more { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--ease); }
.kit .lx-more ul { display: grid; gap: 16px; margin: 0; padding: 2px 16px 18px 62px; list-style: none; }
.kit .lx-more li { display: grid; gap: 4px; padding-inline-start: 14px; box-shadow: inset 2px 0 0 var(--tone-veil); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .35s var(--ease); }
.kit .lx-part.is-open .lx-more li { opacity: 1; transform: none; transition-delay: .12s; }
.kit .lx-part.is-open .lx-more li + li { transition-delay: .2s; }
.kit .lx-more li b { font-size: 14px; font-weight: 600; color: var(--k-ink); }
.kit .lx-more li span { font-size: 14px; line-height: 1.55; color: var(--k-ink-3); text-wrap: pretty; }
.kit .tx-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: auto 0 0; padding-top: 16px; font-size: 13px; line-height: 1.45; color: var(--k-ink-3); }
.kit .tx-foot > .k-icon { flex: none; color: var(--known); }
.kit .tx-foot > span { flex: 1 1 220px; }

/* the entry test: the course it starts from becomes the person's own */
.kit .tb-stage { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; margin: 4px 0 24px; padding: 22px; border-radius: 22px; background: var(--k-fill); cursor: pointer; }
.kit .tb-col { display: grid; gap: 12px; margin: 0; padding: 18px 18px 20px; border-radius: 16px; background: var(--k-panel); box-shadow: 0 0 0 1px var(--rail); }
.kit .tb-col.is-you { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent), 0 14px 34px -20px color-mix(in srgb, var(--tone) 60%, transparent); }
.kit .tb-cap { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--k-ink-3); }
.kit .tb-col.is-you .tb-cap { color: var(--tone-ink); }
.kit .tb-arrow { display: grid; place-items: center; color: var(--k-ink-3); }
.kit .tb-row { position: relative; display: flex; align-items: center; gap: 9px; height: 20px; }
.kit .tb-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.kit .tb-row.is-l .tb-dot { background: #0a84ff; }
.kit .tb-row.is-c .tb-dot { background: #8e5cf0; }
.kit .tb-row.is-e .tb-dot { background: #e08a00; }
.kit .tb-bar { display: block; width: var(--w); height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--k-ink) 15%, transparent); }
.kit .tb-tag { position: absolute; inset-inline-end: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 99px; font-style: normal; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.kit .tb-tag.is-known { background: var(--known-veil); color: var(--known); }
.kit .tb-tag.is-more { background: color-mix(in srgb, #8e5cf0 18%, transparent); color: #b391ff; }
:root[data-theme="light"] .kit .tb-tag.is-more { color: #7a45e6; }
.kit .tb-tag.is-new { background: color-mix(in srgb, #0a84ff 15%, transparent); color: #3b9dff; }
:root[data-theme="light"] .kit .tb-tag.is-new { color: #0071e3; }
.kit .tb-row.is-gone .tb-bar, .kit .tb-row.is-gone .tb-dot { opacity: .3; }
.kit .tb-row.is-gone .tb-bar { width: calc(var(--w) - 30%); }
.kit .tb-row.is-more { height: 28px; }
.kit .tb-row.is-more .tb-bar { height: 11px; width: calc(var(--w) - 20%); background: color-mix(in srgb, #8e5cf0 55%, transparent); }
.kit .tb-row.is-new .tb-bar { width: calc(var(--w) - 36%); background: color-mix(in srgb, #0a84ff 40%, transparent); }
/* the play: the rows of your course come up, the new one slides in, each word pops (again on a hover or a tap) */
.kit .tb-stage.is-play .tb-col.is-you .tb-row { animation: tb-rise .45s var(--ease) both; }
.kit .tb-stage.is-play .tb-col.is-you .tb-row:nth-of-type(1) { animation-delay: .5s; }
.kit .tb-stage.is-play .tb-col.is-you .tb-row:nth-of-type(2) { animation-delay: .6s; }
.kit .tb-stage.is-play .tb-col.is-you .tb-row:nth-of-type(3) { animation-delay: .7s; }
.kit .tb-stage.is-play .tb-col.is-you .tb-row:nth-of-type(5) { animation-delay: .8s; }
.kit .tb-stage.is-play .tb-row.is-new { animation: tb-new .6s var(--ease) 1.5s both !important; }
.kit .tb-stage.is-play .tb-tag { animation: tb-tag .4s var(--ease) both; animation-delay: 1.9s; }
.kit .tb-stage.is-play .tb-row.is-gone .tb-tag { animation-delay: 1.2s; }
.kit .tb-stage.is-play .tb-row.is-more .tb-tag { animation-delay: 1.4s; }
@keyframes tb-rise { from { opacity: 0; transform: translateY(5px); } }
@keyframes tb-new { from { opacity: 0; height: 0; transform: translateX(-10px); } }
@keyframes tb-tag { from { opacity: 0; transform: scale(.85); } }
/* the three moments of the call on one line: small rings joined by a hairline, the last in the test's green */
.kit .tb-how { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.kit .tb-how::before { content: ""; position: absolute; top: 11px; left: 11px; right: calc((100% - 40px) / 3 - 11px); height: 1px; background: linear-gradient(90deg, var(--rail), color-mix(in srgb, var(--tone) 55%, transparent)); }
.kit .tb-how li { display: grid; align-content: start; gap: 3px; }
.kit .tb-how span { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 10px; border-radius: 50%; background: var(--k-panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-ink) 16%, transparent); font-size: 12px; font-weight: 500; color: var(--k-ink-3); }
.kit .tb-how li:last-child span { background: var(--tone); box-shadow: none; color: var(--k-on-blue); }
.kit .tb-how b { font-size: 14px; font-weight: 600; color: var(--k-ink); }
.kit .tb-how small { font-size: 13px; line-height: 1.45; color: var(--k-ink-3); }

/* drawn again where it is: no entrance played again; no motion for whoever asked for none */
.kit.k-precall.is-steady .lx-part { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .kit .lx-part, .kit .tb-stage.is-play *, .kit .tb-stage.is-play .tb-row.is-new { animation: none !important; }
  .kit .lx-more, .kit .lx-more li, .kit .lx-chev { transition: none; }
}

/* a phone */
@media (max-width: 640px) {
  .kit .ss-ed-card.lx, .kit .ss-ed-card.tb { padding: 22px 18px 20px; }
  .kit .lx > .ss-ed-card-head small, .kit .tb > .ss-ed-card-head small { display: none; }
  .kit .lx-parts { margin: 0 -8px; }
  .kit .lx-row { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 10px; padding: 12px 8px; }
  .kit .lx-part:not(:last-child)::before { inset-inline-start: 22.5px; top: 37px; bottom: -13px; }
  .kit .lx-row > :nth-child(3) { display: none; }
  .kit .lx-more ul { padding: 0 8px 16px 48px; }
  .kit .tb-stage { padding: 14px 12px; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  .kit .tb-col { padding: 12px 10px 14px; gap: 10px; }
  .kit .tb-tag { font-size: 0; gap: 0; padding: 3px; }
  .kit .tb-tag .k-icon { width: 10px; height: 10px; }
  .kit .tb-how { grid-template-columns: 1fr; gap: 14px; }
  .kit .tb-how li { grid-template-columns: 30px auto; column-gap: 8px; }
  .kit .tb-how span { grid-row: span 2; margin: 0; }
  .kit .tb-how::before { top: 11px; bottom: 11px; left: 11px; right: auto; width: 1px; height: auto; background: linear-gradient(var(--rail), color-mix(in srgb, var(--tone) 55%, transparent)); }
}

/* the title keeps its height on a desktop: a tall card scrolls inside itself and never squeezes the words above it
   (the title, clipped by its own overflow, had no floor in the column's flex and shrank to a sliver) */
@media (min-width: 961px) {
  .kit.k-precall .k-item-copy > :not(.k-item-content) { flex-shrink: 0; }
}

/* contrast on the filled circles (8 Nov): on the dark theme's light green the test's third number is dark; the open
   part's number is always white and bold on a solid blue */
:root:not([data-theme="light"]) .kit.k-precall.is-test .tb-how li:last-child span { color: var(--k-panel); }
.kit .lx-part.is-open:not(.is-known) .lx-n { background: #0a84ff; color: var(--k-on-blue); font-weight: 600; }

/* the lesson's parts with more air (Ale, 8 Nov): only the part's title on its row, the points when it opens */
.kit .lx-lead { margin-bottom: 30px; }
.kit .lx-parts { gap: 12px; }
.kit .lx-row { padding-block: 16px; }
/* the line between the circles follows the new spacing: from just under this circle (16px of padding + 25px) to just
   above the next one (the 12px gap + its 16px of padding), on the desktop and on the phone */
.kit .lx-part:not(:last-child)::before { top: 43px; bottom: -26px; }

/* «Chi ti spiega» (8 Nov): the lesson's teaching, in the same card under two quiet headings (Create's crea-sec h4) */
.kit .ss-ed-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 2px; padding-top: 18px; border-top: 1px solid var(--k-line-soft, rgb(255 255 255 / .07)); }
.kit .ss-ed-sec h4 { margin: 0; font: 600 12px var(--k-sans, Inter, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--k-ink-3); }
.kit .ss-ed-sec small { font-size: 12.5px; color: var(--k-ink-3); }