/* step-detail.tsx: the page of a step before its call (Ale, 2026-10-09: Granola, «molto premium e molto semplice»,
   then «tutte insieme senza dover scrollare»). One screen: the words and what the kind needs on the left, the face
   of who waits on the right with Meet's two buttons and the way in at its foot. White, ink, greys; the blue for the
   way in and where you start, the green only for the live dot, Meet's red for off. */

.kit .k-item {
  --item-ink: var(--k-ink);
  --item-quiet: color-mix(in srgb, var(--k-ink) 55%, transparent);
  --item-soft: color-mix(in srgb, var(--k-ink) 74%, transparent);
  --item-hair: color-mix(in srgb, var(--k-ink) 8%, transparent);
  --item-blue: #0071e3;
  --item-live: #30d158;
  display: grid; align-content: start; width: min(1200px, 100% - 64px); margin: 0 auto; padding: 28px 0 24px;
}
:root:not([data-theme="light"]) .kit .k-item { --item-blue: #0a84ff; }

.kit .k-item-back { display: inline-flex; align-items: center; justify-self: start; gap: 4px; padding: 7px 14px 7px 8px; border: 0; border-radius: 99px; background: var(--k-fill); font: inherit; font-size: 13.5px; font-weight: 500; color: var(--item-soft); cursor: pointer; transition: background-color .15s, color .15s; }
.kit .k-item-back:hover { color: var(--item-ink); background: color-mix(in srgb, var(--k-ink) 9%, transparent); }

/* ---------- one screen: the words, and the door ---------- */
.kit .k-item-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px clamp(40px, 6vw, 88px); margin-top: clamp(16px, 4vh, 44px); }
.kit .k-item-copy { display: grid; justify-items: start; gap: 18px; min-width: 0; max-width: 600px; }
.kit .k-item-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--item-quiet); }
.kit .k-item-kicker .doodle { color: var(--item-ink); }
.kit .k-item-kicker i { font-style: normal; opacity: .6; }
.kit .k-item-copy h1 { margin: 0; font-family: var(--k-serif); font-size: clamp(36px, 4.4vw, 56px); font-weight: 400; line-height: 1.02; letter-spacing: -.028em; color: var(--item-ink); text-wrap: balance; }
.kit .k-item-line { display: grid; gap: 10px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--item-soft); text-wrap: pretty; }
.kit .k-item-content { width: 100%; margin-top: 6px; }
.kit .k-item-label { display: block; margin-bottom: 4px; font-family: var(--k-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--item-quiet); }

/* a lesson: its steps on one white card, a numbered circle each, one thin line through them filling blue */
.kit .k-item-prog { --n: 34px; --gap: 8px; display: grid; width: 100%; margin: 0; padding: 30px 32px; list-style: none; border-radius: 30px; background: var(--k-panel, #fff); box-shadow: 0 0 0 1px var(--item-hair), 0 2px 4px rgb(0 12 31 / .04), 0 24px 48px -28px rgb(0 12 31 / .3); }
.kit .k-item-prog li { position: relative; display: grid; grid-template-columns: var(--n) minmax(0, 1fr); column-gap: 20px; padding-bottom: 30px; animation: k-item-row .5s var(--k-out, ease-out) both; animation-delay: calc(.1s + var(--i, 0) * .07s); }
.kit .k-item-prog li:last-child { padding-bottom: 0; }
.kit .k-item-prog-n { position: relative; z-index: 1; display: grid; place-items: center; width: var(--n); height: var(--n); border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k-ink) 14%, transparent); font-size: 14px; font-weight: 600; color: var(--item-quiet); font-variant-numeric: tabular-nums; }
.kit .k-item-prog-text { display: grid; align-content: start; justify-items: start; gap: 4px; min-width: 0; padding-top: 6px; }
.kit .k-item-prog-name { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: var(--item-ink); text-wrap: balance; }
.kit .k-item-prog-note { font-size: 14.5px; line-height: 1.45; color: var(--item-quiet); text-wrap: pretty; }
.kit .k-item-prog-tag { margin-top: 8px; padding: 5px 11px; border-radius: 99px; background: color-mix(in srgb, var(--item-blue) 10%, transparent); font-size: 12.5px; font-weight: 600; color: var(--item-blue); }
/* the line to the next circle, apart from both: grey, and over it blue as far as you got */
.kit .k-item-prog li:not(:last-child)::before,
.kit .k-item-prog li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--n) / 2 - 1px); top: calc(var(--n) + var(--gap)); bottom: var(--gap); width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--k-ink) 10%, transparent); }
.kit .k-item-prog li:not(:last-child)::after { bottom: auto; height: calc((100% - var(--n) - 2 * var(--gap)) * var(--fill, 0)); background: var(--item-blue); transform-origin: top; animation: k-item-rail .6s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(.3s + var(--i, 0) * .35s); }
.kit .k-item-prog li.is-done .k-item-prog-n { background: var(--item-blue); box-shadow: none; color: #fff; }
.kit .k-item-prog li.is-done .k-item-prog-name { color: var(--item-soft); }
.kit .k-item-prog li.is-here .k-item-prog-n { background: var(--k-panel, #fff); box-shadow: inset 0 0 0 2px var(--item-blue), 0 0 0 5px color-mix(in srgb, var(--item-blue) 12%, transparent); color: var(--item-blue); }
@keyframes k-item-rail { from { transform: scaleY(0); } }
@keyframes k-item-row { from { opacity: 0; transform: translateY(6px); } }

/* a case: the goal, what you know, the last time */
.kit .k-item-brief { display: grid; gap: 22px; }
.kit .k-item-goal { margin: 0; padding-left: 16px; box-shadow: inset 2px 0 0 var(--item-ink); font-family: var(--k-serif); font-size: 22px; line-height: 1.3; letter-spacing: -.01em; color: var(--item-ink); text-wrap: balance; }
.kit .k-item-know { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kit .k-item-know li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; color: var(--item-soft); }
.kit .k-item-know li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--k-ink) 32%, transparent); }

/* the coach before and after, two switches */
/* the coach and the call, on the lesson's line: a face a step, the coach's two a switch each */
.kit .k-item-flow { --n: 36px; --gap: 6px; padding: 4px 0; border-radius: 0; background: none; box-shadow: none; } /* no card (Ale, 10 Oct, on the lesson's: «non mi fa impazzire questa card») */
.kit .k-item-flow li { grid-template-columns: minmax(0, 1fr); padding-bottom: 18px; }
.kit .k-item-flow-row { display: grid; grid-template-columns: var(--n) minmax(0, 1fr) auto; align-items: center; column-gap: 16px; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; text-align: start; color: inherit; }
.kit .k-item-flow button.k-item-flow-row { cursor: pointer; }
.kit .k-item-flow button.k-item-flow-row:focus-visible { outline: 2px solid var(--item-blue); outline-offset: 6px; border-radius: 14px; }
.kit .k-item-flow .k-item-prog-n { overflow: hidden; box-shadow: 0 0 0 3px var(--k-panel, #fff), 0 0 0 4px var(--item-hair); }
.kit .k-item-flow .k-item-prog-n img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .25s, filter .25s; }
.kit .k-item-flow .k-item-prog-name { font-size: 15.5px; transition: opacity .25s; }
/* the portrait is half the body: in a circle, its face */
.kit .k-item-flow li.is-call .k-item-prog-n img { transform: scale(1.65); transform-origin: 50% 26%; }
.kit .k-item-flow li.is-call .k-item-prog-n { box-shadow: 0 0 0 3px var(--k-panel, #fff), 0 0 0 4.5px var(--item-blue); }
.kit .k-item-flow li.is-off .k-item-prog-n img { opacity: .45; filter: grayscale(1); }
.kit .k-item-flow li.is-off .k-item-prog-name { opacity: .4; }
.kit .k-item-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--k-ink) 13%, transparent); transition: background-color .25s, box-shadow .2s; }
.kit .k-item-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 2px 6px rgb(0 0 0 / .1); transition: transform .3s var(--k-spring, ease); }
/* on: the app's blue, the knob white, day and night (Ale, 10 Oct: «li farei blu non bianchi») */
.kit .k-item-flow-row[aria-checked="true"] .k-item-switch { background: var(--item-blue); }
.kit .k-item-flow-row[aria-checked="true"] .k-item-switch::after { transform: translateX(16px); background: #fff; }
.kit .k-item-flow-row:hover .k-item-switch { box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-ink) 6%, transparent); }

/* the verifica: one line of rules */
.kit .k-item-rules { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; margin: 0; font-size: 15px; color: var(--item-soft); }
.kit .k-item-rules b { margin-right: 3px; font-family: var(--k-serif); font-size: 34px; font-weight: 400; line-height: 1; color: var(--item-ink); font-variant-numeric: lining-nums tabular-nums; }
.kit .k-item-prize { display: inline-flex; align-items: center; gap: 8px; align-self: center; padding: 7px 13px; border-radius: 99px; background: var(--k-fill); font-size: 13.5px; color: var(--item-ink); }

/* the button, the times before beside it */
.kit .k-item-cta { display: flex; align-items: center; margin: 4px 0 0 -12px; }

.kit .k-item-goes { position: relative; }
.kit .k-item-goes-line { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 99px; background: none; font: inherit; font-size: 13.5px; color: var(--item-quiet); cursor: pointer; transition: background-color .15s, color .15s; }
.kit .k-item-goes-line:hover { background: var(--k-fill); color: var(--item-ink); }
.kit .k-item-goes-line b { font-family: var(--k-serif); font-size: 18px; font-weight: 400; color: var(--item-ink); }
.kit .k-item-goes-line .k-icon { transition: rotate .2s; }
.kit .k-item-goes-line .k-icon.is-open { rotate: 180deg; }
.kit .k-item-goes-list { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; display: grid; width: 280px; max-height: 260px; margin: 0; padding: 6px; overflow: auto; list-style: none; border-radius: 18px; background: var(--k-panel); box-shadow: 0 0 0 1px var(--item-hair), 0 20px 40px -16px rgb(0 12 31 / .35); }
.kit .k-item-goes-list button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 13.5px; color: var(--item-ink); text-align: start; cursor: pointer; }
.kit .k-item-goes-list button:hover:not(:disabled) { background: var(--k-fill); }
.kit .k-item-goes-list button:disabled { cursor: default; }
.kit .k-item-goes-list b { font-family: var(--k-serif); font-size: 17px; font-weight: 400; }
.kit .k-item-goes-list small { color: var(--item-quiet); }

/* the door: the portrait, the live status at its top, Meet's buttons at its foot */
.kit .k-item-door { position: relative; height: min(680px, calc(100dvh - 170px)); min-height: 420px; aspect-ratio: 4 / 5; margin: 0; animation: k-item-in .7s var(--k-out, ease-out) both; }
.kit .k-item-portrait { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 34px; background: var(--k-fill); box-shadow: 0 2px 4px rgb(0 12 31 / .06), 0 30px 60px -24px rgb(0 12 31 / .35); }
.kit .k-item-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kit .k-item-live { position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px 8px 12px; border-radius: 99px; background: rgb(255 255 255 / .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 6px 18px -8px rgb(0 0 0 / .35); font-size: 13.5px; color: #3a3f48; }
.kit .k-item-live b { font-weight: 600; color: #0b1220; }
.kit .k-item-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--item-live); }
.kit .k-item-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--item-live); opacity: 0; animation: k-item-pulse 2.2s ease-out infinite; }
.kit .k-item-meet { position: absolute; left: 50%; bottom: 22px; display: flex; gap: 12px; translate: -50% 0; }
.kit .k-item-meet button { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .2); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); color: #fff; cursor: pointer; transition: background-color .15s, transform .15s; }
.kit .k-item-meet button:hover { background: rgb(255 255 255 / .3); }
.kit .k-item-meet button:active { transform: scale(.96); }
.kit .k-item-meet button.is-off { background: #ea4335; box-shadow: none; }
.kit .k-item-meet button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the one button, white on the picture beside the two round ones, as Meet's «Partecipa» */
.kit .k-item-meet .k-item-join { display: inline-flex; align-items: center; gap: 10px; width: auto; padding: 0 22px 0 24px; border-radius: 99px; background: var(--item-blue); box-shadow: 0 10px 28px -10px rgb(0 40 120 / .6); color: #fff; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; transition: transform .25s var(--k-spring, ease), box-shadow .25s; }
.kit .k-item-meet .k-item-join:hover { background: color-mix(in srgb, var(--item-blue) 88%, #fff); transform: translateY(-1px); }
.kit .k-item-meet .k-item-join .k-icon { transition: translate .25s var(--k-spring, ease); }
.kit .k-item-meet .k-item-join:hover .k-icon { translate: 3px 0; }
.kit .k-item-meet .k-item-join:focus-visible { outline-color: #fff; }
.kit .k-item-meet .k-item-join:disabled { opacity: .7; cursor: default; transform: none; }
/* avatar or voice only (Ale, 21 Oct): two words on the glass above Meet's buttons, the chosen one white */
.kit .k-item-presence { position: absolute; left: 50%; bottom: 92px; display: flex; gap: 2px; padding: 3px; border-radius: 99px; translate: -50% 0; background: rgb(0 0 0 / .28); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); white-space: nowrap; }
.kit .k-item-presence button { padding: 7px 14px; border: 0; border-radius: 99px; background: transparent; color: rgb(255 255 255 / .86); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.kit .k-item-presence button:hover { color: #fff; }
.kit .k-item-presence button[aria-checked="true"] { background: #fff; color: #0b1220; }
.kit .k-item-presence button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* voice only: nobody shows up on screen, so the face steps back */
.kit .k-item-door .k-item-portrait img { transition: filter .35s, opacity .35s; }
.kit .k-item-door.is-voice .k-item-portrait img { filter: grayscale(.6) brightness(.7); }
.kit .k-item-notice { margin: 0; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, #e5484d 10%, transparent); font-size: 14px; color: #c8352b; }

@keyframes k-item-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes k-item-pulse { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .kit .k-item-door, .kit .k-item-live i::after, .kit .k-item-prog li, .kit .k-item-prog li::after { animation: none; }
}

/* narrower: the door above the words, the page scrolls */
@media (max-width: 960px) {
  .kit .k-item { min-height: 0; }
  .kit .k-item-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kit .k-item-door { order: -1; justify-self: center; width: min(360px, 100%); height: auto; min-height: 0; }
  .kit .k-item-copy { max-width: none; }
}
@media (max-width: 520px) {
  .kit .k-item-meet { gap: 8px; bottom: 16px; }
  .kit .k-item-presence { bottom: 80px; }
  .kit .k-item-meet .k-item-join { padding: 0 18px; font-size: 14px; }
}

/* a window at the centre over a step's page (`StepDialog`): a lesson's part, the whole case; it scrolls on its own */
.kit .k-item-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / .32); animation: k-item-fade .2s ease-out; }
.kit .k-item-dialog { --item-ink: var(--k-ink); --item-quiet: color-mix(in srgb, var(--k-ink) 55%, transparent); --item-soft: color-mix(in srgb, var(--k-ink) 74%, transparent); --item-hair: color-mix(in srgb, var(--k-ink) 8%, transparent); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; width: min(580px, 100%); max-height: min(80vh, 700px); padding: 22px 26px 18px; border-radius: 28px; background: var(--k-panel, #fff); box-shadow: 0 0 0 1px var(--item-hair), 0 30px 80px -30px rgb(0 0 0 / .55); animation: k-item-in .26s cubic-bezier(.22, .61, .36, 1); }
.kit .k-item-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kit .k-item-dialog-top { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--item-quiet); }
.kit .k-item-dialog-x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--k-fill); color: var(--item-soft); cursor: pointer; }
.kit .k-item-dialog h2 { margin: 0; font-family: var(--k-serif); font-size: 26px; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: var(--item-ink); text-wrap: balance; }
.kit .k-item-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.kit .k-item-dialog footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--item-hair); }
@keyframes k-item-in { from { transform: translateY(10px) scale(.98); opacity: 0; } }
@keyframes k-item-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kit .k-item-dialog, .kit .k-item-scrim { animation: none; } }