/* The page of a single content being made in Create (create.js creaPage): the learner app's «Crea» page, copied as it is
   (frontend/learner/v2.css «Crea», and the field of kit/course-builder.css). A step's page (kit/step-detail.css): the
   title, the tabs and one card on the left, as tall as the face on the right; one turn of the chat at a time in the
   card, the resoconto in its place once ready, folded into the corner pill while the talk goes on. */

/* ---------- the field (kit/course-builder.css): a hairline at rest, the ring of colour when written in, turning while SOLVE thinks ---------- */
@property --cb-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.kit .cb-ask { --cb-ring: conic-gradient(from var(--cb-turn), #0a84ff, #5e5ce6, #a35cf0, #e07ac8, #5e5ce6, #0a84ff); }
.kit .cb-ask { position: relative; isolation: isolate; width: 100%; padding: 1px; border-radius: 26px; background: var(--k-line-2); text-align: start; animation: cb-turn 14s linear infinite; }
.kit .cb-ask::after { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: var(--cb-ring); opacity: 0; transition: opacity .5s var(--k-ui); pointer-events: none; }
.kit .cb-ask::before { content: ""; position: absolute; z-index: -1; inset: 14px 40px -16px; border-radius: 40px; background: var(--cb-ring); filter: blur(28px); opacity: 0; transition: opacity .6s var(--k-ui); pointer-events: none; }
.kit .cb-ask:focus-within::after { opacity: .7; }
.kit .cb-ask:focus-within::before { opacity: .14; }
.kit .cb-ask.is-busy { animation-duration: 2.6s; }
.kit .cb-ask.is-busy::after { opacity: 1; }
.kit .cb-ask.is-busy::before { opacity: .26; }
.kit .cb-ask-in { position: relative; z-index: 1; display: grid; border-radius: 25px; background: var(--k-panel); box-shadow: 0 1px 2px oklch(0% 0 0 / .04), 0 18px 40px -28px oklch(0% 0 0 / .28); }
.kit .cb-ask textarea { display: block; width: 100%; min-height: 28px; max-height: 200px; margin: 0; padding: 16px 20px 4px; border: 0; background: none; resize: none; color: var(--k-ink); font: inherit; font-size: 15.5px; line-height: 1.5; outline: 0; field-sizing: content; }
.kit .cb-ask textarea::placeholder { color: var(--k-ink-3); }
/* after the first words: one line, the files' button, the words, the buttons */
.kit .cb-ask-line { display: flex; align-items: flex-end; gap: 6px; padding: 8px; }
.kit .cb-ask-line textarea { flex: 1; min-width: 0; padding: 7px 6px; }

.kit .cb-tool, .kit .cb-send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .2s var(--k-ui), color .2s var(--k-ui), transform .35s var(--k-spring), opacity .2s var(--k-ui); }
.kit .cb-tool { background: none; color: var(--k-ink-3); }
.kit .cb-tool:hover:not(:disabled) { background: var(--k-fill); color: var(--k-ink); }
.kit label.cb-tool svg { stroke-width: 1.75; transition: transform .55s var(--spring, ease); }
.kit label.cb-tool:active svg { transform: rotate(90deg) scale(.8); transition: transform .1s ease-out; }
.kit .cb-send { background: var(--k-ink); color: var(--k-panel); }
.kit .cb-send .k-icon { transform: rotate(-90deg); }
.kit .cb-send:not(:disabled):hover { transform: scale(1.07); }
.kit .cb-send:disabled { background: var(--k-fill); color: var(--k-ink-3); cursor: default; }
.kit .cb-send:focus-visible, .kit .cb-tool:focus-visible { outline: 2px solid var(--k-blue-text); outline-offset: 2px; }
@keyframes cb-turn { to { --cb-turn: 360deg; } }

/* ---------- «Crea» (learner v2.css): a step's page, the chat in its card ---------- */
.kit.crea-page .k-item { --h: min(740px, calc(100dvh - 150px)); }
.kit.crea-page .k-item-door { height: var(--h); aspect-ratio: 3 / 4; }
.kit.crea-page .k-item-hero { align-items: start; column-gap: clamp(36px, 5vw, 72px); }
.kit .crea-left { display: flex; flex-direction: column; height: var(--h); min-height: 460px; max-width: 600px; width: 100%; min-width: 0; }
.kit .crea-head { display: grid; gap: 12px; justify-items: start; min-width: 0; width: 100%; }
/* the title on one line: what does not fit ends in «…» */
.kit .crea-title { max-width: 100%; margin: 0; overflow: hidden; font-family: var(--k-serif); font-size: clamp(30px, 3vw, 42px); font-weight: 400; line-height: 1.12; letter-spacing: -.028em;
  white-space: nowrap; text-overflow: ellipsis; color: var(--item-ink); }
.kit .crea-title.is-empty { color: var(--item-quiet); }
.kit .crea-left > .ss-ed-tabs { align-self: flex-start; margin-top: 22px; }
.kit .crea-left > .k-item-notice { margin: 12px 0 0; }
/* each tab in one card that reaches the foot of the face */
.kit .crea-card { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 16px; padding: 28px 30px 18px; border-radius: 34px; background: var(--k-panel-2); box-shadow: 0 0 0 1px var(--item-hair); }
:root[data-theme="light"] .kit .crea-card { background: #fff; box-shadow: 0 0 0 1px rgb(0 12 31 / .05), 0 2px 6px rgb(0 12 31 / .06), 0 28px 60px -22px rgb(0 12 31 / .28); }
.kit .crea-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 0 2px 12px; overflow-y: auto; scrollbar-width: none; }
/* centred while it fits, from the top when it does not (a centred column that overflows loses its top) */
.kit .crea-mid::before, .kit .crea-mid::after { content: ""; flex: 1 1 0; }
.kit .crea-mid > * { flex-shrink: 0; }
.kit .crea-mid.is-top::before { flex: 0 0 0; }
.kit .crea-mid.is-top { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 28px; }
/* one turn of the chat */
.kit .crea-me { align-self: flex-end; max-width: 82%; margin: 0; padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--k-fill); font-size: 14.5px; line-height: 1.45; color: var(--item-soft); }
/* two lines and an ellipsis, clamped on an inner span: clamped on the bubble itself, its padding showed a sliver of the third line (1 Nov) */
.kit .crea-me span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kit .crea-solve { display: grid; gap: 10px; justify-items: start; }
.kit .crea-who-says { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--k-sans, Inter, sans-serif); letter-spacing: .02em; color: var(--item-quiet); }
.kit .crea-who-says i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #5b8cff, #a77bff); color: var(--k-white); }
.kit .crea-say { margin: 0; font-family: var(--k-serif); font-size: 21px; line-height: 1.38; letter-spacing: -.008em; color: var(--item-ink); text-wrap: pretty; }
.kit .crea-say.is-sm { font-size: 19px; }
.kit .crea-picks { display: grid; gap: 6px; margin-top: 2px; }
.kit .crea-picks button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 16px 0 18px; border: 0; border-radius: 16px;
  background: var(--k-fill); font: 500 15px var(--k-sans, Inter, sans-serif); text-align: left; color: var(--item-ink); cursor: pointer; transition: background .15s; }
.kit .crea-picks button .k-icon { opacity: 0; transform: translateX(-4px); transition: all .15s; color: var(--item-quiet); }
.kit .crea-picks button:hover { background: color-mix(in srgb, var(--k-ink) 10%, transparent); }
.kit .crea-picks button:hover .k-icon { opacity: 1; transform: none; }
.kit .crea-ask { flex: none; }
.kit .crea-ask .cb-ask-in { background: var(--k-panel); }
:root[data-theme="light"] .kit .crea-ask .cb-ask-in { background: var(--k-panel-2); }
.kit .crea-ask textarea { resize: none; }
.kit .crea-card .crea-mats { margin: 0 0 10px; }
.kit .crea-wait { display: inline-flex; gap: 5px; padding: 6px 0; }
.kit .crea-wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--item-quiet); animation: crea-dot 1.2s ease-in-out infinite; }
.kit .crea-wait i:nth-child(2) { animation-delay: .15s; } .kit .crea-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes crea-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.kit .crea-in { animation: crea-in .5s cubic-bezier(.22, .61, .36, 1) both; }
.kit .crea-in:nth-child(2) { animation-delay: .07s; } .kit .crea-in:nth-child(3) { animation-delay: .14s; } .kit .crea-in:nth-child(4) { animation-delay: .21s; } .kit .crea-in:nth-child(5) { animation-delay: .28s; }
@keyframes crea-in { from { opacity: 0; transform: translateY(10px); } }
/* the resoconto: on the card itself, no box in the box */
.kit.crea-page { overflow-x: clip; } /* the face comes in from the right: on a phone that is not a side scroll */
.kit .crea-rc { display: grid; gap: 20px; }
.kit .crea-rc-top { display: flex; align-items: center; gap: 14px; }
.kit .crea-pic { position: relative; flex: none; display: block; width: 46px; height: 46px; }
.kit .crea-pic.is-big { width: 64px; height: 64px; }
.kit .crea-pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.kit .crea-rc-top > span:not(.crea-pic) { display: grid; gap: 3px; min-width: 0; }
.kit .crea-rc-top small { font-size: 13px; color: var(--item-quiet); }
.kit .crea-rc-top b { font-family: var(--k-serif); font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -.015em; color: var(--item-ink); }
.kit .crea-rc-line { display: grid; gap: 5px; }
.kit .crea-rc-line small, .kit .crea-lbl { font-size: 12.5px; font-weight: 600; color: var(--item-quiet); }
.kit .crea-lbl { margin-bottom: -6px; }
.kit .crea-rc-line p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--item-ink); }
.kit .crea-qs { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.kit .crea-qs li { display: flex; gap: 14px; align-items: baseline; font-family: var(--k-serif); font-size: 21px; line-height: 1.3; color: var(--item-ink); }
.kit .crea-qs li i { flex: none; width: 14px; font: 600 12px var(--k-sans, Inter, sans-serif); font-style: normal; color: var(--item-quiet); }
.kit .crea-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--item-ink); }
/* Persone and Altro: sections with a name, rows with room */
.kit .crea-sec { margin-top: 26px; }
.kit .crea-mid > .crea-sec:first-child, .kit .crea-mid > .crea-who + .crea-sec { margin-top: 0; }
.kit .crea-mid > .crea-who + .crea-sec { margin-top: 20px; }
.kit .crea-sec h4 { margin: 0 0 4px; font: 600 12px var(--k-sans, Inter, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--item-quiet); }
.kit .crea-who { display: flex; align-items: center; gap: 18px; }
.kit .crea-who > span:not(.crea-faces):not(.crea-pic) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kit .crea-who b { font-family: var(--k-serif); font-size: 24px; font-weight: 400; letter-spacing: -.015em; color: var(--item-ink); }
.kit .crea-who small { font-size: 14px; color: var(--item-quiet); }
.kit .crea-sec .ss-setting { padding: 12px 0; gap: 24px; }
.kit .crea-sec .ss-setting + .ss-setting { border-top: 1px solid var(--item-hair); }
.kit .crea-sec .ss-setting-main b { font-size: 16.5px; }
.kit .crea-sec .ss-setting-main small { font-size: 13.5px; }
.kit .crea-sec .ss-ed-range { min-width: 240px; }
.kit .crea-sec .ss-ed-seg button { height: 36px; padding: 0 14px; font-size: 14px; }
/* room for the ring of the face chosen: the card's middle scrolls, and clips what passes its edge */
.kit .crea-who.is-many { flex-wrap: wrap; }
.kit .crea-who.is-many .crea-faces { flex-basis: 100%; }
.kit .crea-faces { display: flex; flex-wrap: wrap; gap: 10px; flex: none; padding: 6px; }
.kit .crea-faces button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.kit .crea-faces button img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: .5; transition: opacity .15s; }
.kit .crea-faces button:hover img { opacity: .85; }
.kit .crea-faces button[aria-pressed="true"] img { opacity: 1; box-shadow: 0 0 0 2px var(--k-panel-2), 0 0 0 4px var(--item-blue, #0a84ff); }
:root[data-theme="light"] .kit .crea-faces button[aria-pressed="true"] img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--item-blue, #0071e3); }
/* a choice that shapes the whole thing: tiles, not a switch */
.kit .crea-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; padding: 12px 0 4px; }
.kit .crea-tiles button { display: grid; gap: 3px; justify-items: start; align-content: start; padding: 14px 14px 13px; border: 0; border-radius: 18px; background: var(--k-fill); text-align: left; font: inherit; color: var(--item-soft); cursor: pointer; }
.kit .crea-tiles button b { font-size: 15.5px; font-weight: 600; color: var(--item-ink); }
.kit .crea-tiles button small { font-size: 12.5px; line-height: 1.35; color: var(--item-quiet); }
.kit .crea-tiles button[aria-pressed="true"] { background: var(--k-panel); box-shadow: inset 0 0 0 1.5px var(--item-ink); }
:root[data-theme="light"] .kit .crea-tiles button[aria-pressed="true"] { background: #fff; }
.kit .crea-own { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.kit .crea-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--k-fill); font: 500 14px var(--k-sans, Inter, sans-serif); color: var(--item-ink); cursor: pointer; white-space: nowrap; }
/* the person's own words about their part */
.kit .crea-role { display: grid; gap: 8px; padding: 12px 0 0; }
.kit .crea-role b { font-size: 16.5px; font-weight: 500; color: var(--item-ink); }
.kit .crea-role textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--k-fill); resize: none;
  font: 15px/1.5 var(--k-sans, Inter, sans-serif); color: var(--item-ink); outline: none; transition: background .15s; }
.kit .crea-role textarea:focus { background: color-mix(in srgb, var(--k-ink) 10%, transparent); }
.kit .crea-role textarea::placeholder { color: var(--item-quiet); }
.kit .crea-note { margin: 10px 0 0; font-size: 13.5px; color: var(--item-quiet); }
/* deleting is said in red, and asks first (create.js createDiscard) */
.kit .crea-btn.is-bad { background: rgb(255 69 58 / .14); color: #ff6961; }
.kit .crea-btn.is-bad:hover { background: rgb(255 69 58 / .22); }
:root[data-theme="light"] .kit .crea-btn.is-bad { background: rgb(215 0 21 / .08); color: #d70015; }
/* the face's button when there is something to make: one soft call */
.kit .crea-door .k-item-join:disabled { opacity: .4; cursor: default; }
/* a role said in a few words, and never wider than the face */
.kit .crea-door .k-item-live { max-width: calc(100% - 36px); }
.kit .crea-door .k-item-live b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kit .crea-door .k-item-join.is-ready { animation: crea-call 1.6s ease-out .4s 2; }
@keyframes crea-call { 0% { box-shadow: 0 0 0 0 rgb(10 132 255 / .55); } 100% { box-shadow: 0 0 0 16px rgb(10 132 255 / 0); } }
@media (max-width: 960px) {
  .kit .crea-left { height: auto; min-height: 0; max-width: none; }
  .kit .crea-card { min-height: 420px; }
  .kit.crea-page .k-item-door { height: auto; }
}
@media (max-width: 640px) {
  .kit .crea-card { padding: 22px 18px 14px; border-radius: 26px; }
  .kit .crea-sec .ss-setting { flex-direction: column; align-items: stretch; gap: 10px; }
  .kit .crea-sec .ss-ed-range { min-width: 0; }
  .kit .crea-who { flex-wrap: wrap; }
  .kit .crea-who .crea-faces { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kit .crea-in, .kit .crea-door .k-item-join.is-ready, .kit .crea-wait i { animation: none; } }
.crea-mats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.crea-mat { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 36px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--k-fill, var(--v-fill)); font-size: 13.5px; color: var(--item-soft, var(--v-ink-2)); }
.crea-mat i { display: grid; color: var(--item-quiet, var(--v-ink-3)); }
.crea-mat b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--item-ink, var(--v-ink)); }
.crea-mat button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.crea-mat button:hover { background: var(--k-fill-2); }
.crea-spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .9s linear infinite; }

/* ---------- the resoconto folded into the card's corner while the conversation goes on ---------- */
.kit .crea-card { position: relative; }
.kit .crea-card.has-pill { padding-top: 84px; }
.kit .crea-pill { position: absolute; top: 18px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 36px); height: 48px; padding: 0 14px 0 12px;
  border: 0; border-radius: 16px; background: var(--k-panel); box-shadow: 0 0 0 1px var(--item-hair), 0 12px 28px -16px rgb(0 0 0 / .55); font: inherit; color: var(--item-ink); text-align: left; cursor: pointer;
  transform-origin: top right; transition: transform .2s, box-shadow .2s; }
.kit .crea-pill.is-new { animation: crea-jump .62s cubic-bezier(.22, .61, .36, 1) both; }
:root[data-theme="light"] .kit .crea-pill { background: #fff; box-shadow: 0 0 0 1px rgb(0 12 31 / .06), 0 12px 28px -14px rgb(0 12 31 / .3); }
.kit .crea-pill:hover { transform: translateY(-1px); }
.kit .crea-pill .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 4px rgb(48 209 88 / .18); }
.kit .crea-pill > span { display: grid; min-width: 0; }
.kit .crea-pill small { font-size: 11.5px; font-weight: 600; color: var(--item-quiet); }
.kit .crea-pill b { overflow: hidden; max-width: 260px; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.kit .crea-pill > .k-icon { flex: none; color: var(--item-quiet); }
@keyframes crea-jump { 0% { opacity: 0; transform: translateY(22px) scale(.85); } 55% { opacity: 1; transform: translateY(-7px) scale(1.02); } 78% { transform: translateY(2px); } 100% { transform: none; } }
/* the resoconto opening from that corner, and its own button to fold it */
.kit .crea-rc { position: relative; }
.kit .crea-rc.is-opening { transform-origin: top center; animation: crea-jump .62s cubic-bezier(.22, .61, .36, 1) both; }
.kit .crea-rc .crea-rc-top { padding-right: 48px; }
.kit .crea-fold { position: absolute; top: 0; right: 0; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: var(--k-fill); color: var(--item-soft); cursor: pointer; transform: rotate(180deg); transition: background .15s; }
.kit .crea-fold:hover { background: color-mix(in srgb, var(--k-ink) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .kit .crea-pill.is-new, .kit .crea-rc.is-opening { animation: none; } }
/* drawn again for nothing new (create.js creaPage `is-calm`): nothing plays its entrance again */
.kit .k-item.is-calm .crea-in, .kit .k-item.is-calm .crea-pill.is-new, .kit .k-item.is-calm .crea-rc.is-opening, .kit .k-item.is-calm .crea-door .k-item-join.is-ready { animation: none; }
/* a turn longer than the card: it scrolls, its edges fading instead of cut */
.kit .crea-mid.is-over { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent); padding-top: 18px; padding-bottom: 22px; }

/* ---------- this app ---------- */
/* «Crea» while it writes: the spinner in the button's white */
.kit .crea-door .k-item-join .crea-spin { flex: none; }
.kit .crea-door .k-item-join:has(.crea-spin) { opacity: 1; }
/* a phone: the face above, as a step's page, but short, so the card and its field follow it on the first screen */
@media (max-width: 640px) {
  .kit.crea-page .k-item { width: calc(100% - 32px); padding-top: 16px; }
  .kit.crea-page .k-item-hero { gap: 22px; margin-top: 16px; }
  .kit.crea-page .k-item-door { width: 100%; aspect-ratio: 16 / 10; }
  .kit .crea-title { font-size: 28px; }
  .kit .crea-left > .ss-ed-tabs { margin-top: 16px; max-width: 100%; }
  .kit .crea-left > .ss-ed-tabs button { padding: 0 15px; }
  .kit .crea-card { min-height: 340px; }
  .kit .crea-say { font-size: 19px; }
  .kit .crea-qs li { font-size: 19px; }
  .kit .crea-pill b { max-width: 180px; }
}
/* from Create's box to this page (create.js morphTo): the copies that fly and fade, over everything, untouchable */
.crea-morph { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.crea-morph > * { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .crea-morph { display: none; } }
/* SOLVE's words in the creation chat in Inter, not the serif (Ale, 5 Nov: «usa un font tipo inter») */
.kit .crea-say { font-family: var(--sans); font-size: 17px; line-height: 1.5; letter-spacing: -.011em; font-weight: 450; }
.kit .crea-say.is-sm { font-size: 16px; }
@media (max-width: 640px) { .kit .crea-say { font-size: 16px; } }