/* The kit: the landing's look (frontend/solve-landing on origin/star-base: components/base/base.css for the
   tokens, components/clips/clips.css for the widgets), one copy for the whole app. Every rule lives under
   `.kit`, the class the v8 frame root (`.ws-frame`) and the learner and call pages put on their root, so
   nothing here reaches a page that did not ask for it. Night is the default; day under
   `:root[data-theme="light"]`, the switch the account menu already drives (`shared/theme/data/theme.ts`).
   Token names are English; the landing's own name is beside each. Sizes are the landing widgets' in
   real pixels: its clips draw on a 600px canvas scaled up, so the reference shots look bigger. */

.kit {
  color-scheme: dark;
  --k-ground: oklch(14.2% .045 262);        /* --fondo */
  --k-ground-2: oklch(17.6% .05 262);       /* --fondo-2 */
  --k-panel: oklch(20.5% .05 262);          /* --piano, .pn */
  --k-panel-2: oklch(23.5% .05 262);        /* --piano-2, .pn-2 */
  --k-panel-3: oklch(27% .05 262);          /* --piano-3 */
  --k-line: oklch(96% .005 262 / .09);      /* .pn ring */
  --k-line-soft: oklch(96% .005 262 / .06); /* row separators */
  --k-line-2: oklch(96% .004 85 / .18);     /* --riga-2 */
  --k-fill: oklch(96% .005 262 / .08);      /* neutral .pill */
  --k-fill-2: oklch(96% .005 262 / .12);    /* .rp-seg on */
  --k-ink: oklch(98% .004 255);
  --k-ink-2: oklch(98% .004 255 / .78);
  --k-ink-3: oklch(98% .004 255 / .6);
  --k-faint: oklch(98% .004 255 / .38);     /* --spento */
  /* Apple's system blue, as the pre-assessment branch draws it (Ale, 2026-10-08: «più colorati, più evidenziati»);
     the indigo before it read dull */
  --k-blue: #0a84ff;
  --k-blue-hover: #3395ff;                  /* --blu-su */
  --k-blue-text: #5eaeff;                   /* --blu-t */
  --k-blue-veil: rgb(10 132 255 / .18);     /* --blu-velo */
  --k-blue-chip: rgb(10 132 255 / .26);     /* .pill.blu */
  --k-on-blue: oklch(99% .003 262);
  /* good and not yet, in the brand's blues, never green or amber (Tommi, 2026-10-07): up a full sky blue, down a
     muted one; told apart with any colour vision (dataviz validator, ΔE 14 deutan) and as text (9.8 and 5.7:1) */
  --k-ok: oklch(80% .12 235);
  --k-ok-veil: oklch(80% .12 235 / .15);
  --k-warn: oklch(66% .07 275);             /* --att */
  --k-warn-veil: oklch(66% .07 275 / .15);
  --k-red: oklch(76% .13 25);
  --k-red-veil: oklch(63% .2 25 / .18);
  /* a change, and only a change, up in green and down in red (Tommi, 2026-10-07: «il delta è l'unico posto dove
     puoi non usare il blu»); told apart with any colour vision (ΔE 10.9 deutan) and as text (11.0 and 6.2:1) */
  --k-up: oklch(82% .17 150);
  --k-down: oklch(70% .18 25);
  --k-white: oklch(99% 0 0);                /* .cl-btn */
  --k-white-ink: oklch(18% .06 262);
  --k-white-hover: oklch(92% .03 255);
  --k-seg: oklch(14% .04 262 / .6);         /* .rp-seg */
  --k-bubble: oklch(98% 0 0);               /* .ch-q */
  --k-bubble-ink: oklch(20% .05 262);
  --k-paper: oklch(96.5% .01 90);           /* .fi-doc */
  --k-paper-ink: oklch(25% .04 262);
  --k-dial-bezel: oklch(27% .05 262);
  --k-dial-face: oklch(19% .05 262);
  --k-dial-tick: oklch(62% .012 262);
  --k-dial-lo: #3d8fe6;           /* the dial in three blues (Tommi, 2026-10-07): under the bar */
  --k-dial-hi: #5eaeff;           /* from the bar up */
  --k-dial-needle: oklch(90% .05 255);       /* the needle */
  --k-edge: inset 0 1px 0 oklch(100% 0 0 / .05), 0 0 0 1px oklch(96% .005 262 / .09);
  --k-shadow: 0 40px 70px -34px oklch(0% 0 0 / .9);
  /* two faces only (Ale, 2026-10-08): Inter for the text («cambierei l'helvetica con Inter»), Newsreader, the
     pre-assessment branch's, for titles and large figures; every other font-family in the kit points at these */
  --k-serif: Newsreader, "Rhymes Text", Georgia, serif;
  --k-sans: Inter, -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  --k-spring: cubic-bezier(.34, 1.56, .64, 1); /* --e-molla */
  --k-out: cubic-bezier(.16, 1, .3, 1);        /* --e-esce */
  --k-ui: cubic-bezier(.4, 0, .6, 1);
  --k-needle: cubic-bezier(.3, 1.5, .45, 1);   /* clips.js needle() */
}
/* ADR Center's day (base.css .giorno): cool white, near-black ink, the same blue a step darker. Panels are
   white on the cool ground, ringed and lifted like the landing's milk glass. */
:root[data-theme="light"] .kit {
  color-scheme: light;
  --k-ground: oklch(98.3% .005 255);
  --k-ground-2: oklch(96.6% .009 255);
  --k-panel: oklch(100% 0 0);
  --k-panel-2: oklch(96.6% .009 255);
  --k-panel-3: oklch(92.5% .015 255);
  --k-line: oklch(28% .04 262 / .1);
  --k-line-soft: oklch(28% .04 262 / .07);
  --k-line-2: oklch(28% .04 262 / .17);
  --k-fill: oklch(28% .04 262 / .06);
  --k-fill-2: oklch(100% 0 0);
  --k-ink: oklch(20% .03 264);
  --k-ink-2: oklch(36% .025 264);
  --k-ink-3: oklch(50% .02 264);
  --k-faint: oklch(20% .03 264 / .4);
  /* the system blue by day too, #0a84ff for what is filled, #0071e3 where it is words on white (4.6:1) */
  --k-blue: #0a84ff;
  --k-blue-hover: #0071e3;
  --k-blue-text: #0071e3;
  --k-blue-veil: rgb(10 132 255 / .1);
  --k-blue-chip: rgb(10 132 255 / .14);
  --k-ok: #0a84ff;
  --k-ok-veil: rgb(10 132 255 / .11);
  --k-warn: oklch(56.5% .04 282);           /* 4.6:1; ΔE 16 protan from --k-ok */
  --k-warn-veil: oklch(56.5% .04 282 / .13);
  --k-red: oklch(55% .19 25);
  --k-red-veil: oklch(55% .19 25 / .11);
  /* the dark's mint and coral, deep enough for words on white (Tommi, 2026-10-07: the forest green and the
     maroon did not sit well in the light); the arrow and the sign say it too, for any colour vision */
  --k-up: #1e9c5e;                          /* the pre-assessment branch's green, 3.6:1: figures, not body text */
  --k-down: oklch(58% .2 28);               /* 4.7:1 on white; ΔE 7.0 deutan from --k-up */
  --k-white: oklch(20% .03 264);
  --k-white-ink: oklch(99% 0 0);
  --k-white-hover: oklch(30% .04 264);
  --k-seg: oklch(28% .04 262 / .07);
  --k-bubble: oklch(20% .03 264);
  --k-bubble-ink: oklch(99% 0 0);
  --k-dial-bezel: oklch(92.5% .015 255);
  --k-dial-face: oklch(100% 0 0);
  --k-dial-tick: oklch(50% .02 264);
  --k-dial-lo: #9ccbff;
  --k-dial-hi: #0a84ff;
  --k-dial-needle: oklch(30% .12 264);
  --k-edge: inset 0 1px 0 oklch(100% 0 0), 0 0 0 1px oklch(28% .04 262 / .09);
  --k-shadow: 0 18px 50px -24px oklch(30% .08 262 / .28);
  /* Apple's day (Ale, 2026-10-08: «le card sono bianche e hanno l'ombra, stile apple»): the page white, a card white
     lifted by a soft two-layer shadow and no ring, a tile inside a card the soft grey (#f5f5f7); what floats over the
     page (a menu, a pop-up) a deeper shadow. */
  --k-panel: oklch(100% 0 0);
  --k-panel-2: oklch(97.05% .003 286);
  --k-panel-3: oklch(93% .004 286);
  --k-fill: oklch(28% .02 286 / .06);
  --k-fill-2: oklch(100% 0 0);
  --k-line-soft: oklch(28% .02 286 / .08);
  --k-edge: 0 1px 3px oklch(25% .02 286 / .06), 0 12px 36px -8px oklch(25% .02 286 / .16);
  --k-shadow: 0 0 #0000;
  --k-float: 0 0 0 1px oklch(28% .02 286 / .06), 0 22px 56px -16px oklch(25% .03 286 / .3);
}
/* what floats over the page, by day: white, its own shadow */
:root[data-theme="light"] .kit :is(.k-bench-menu, .k-scope-menu, .k-intake-menu, .k-users-menu, .k-tsel-pop, .k-tmenu-card) { background: oklch(100% 0 0); box-shadow: var(--k-float); }
/* a card inside a card is a flat grey tile (Cosa dire's lines in their block); the period's pill sits flat on the page */
:root[data-theme="light"] .kit .k-home-block .k-cheat-card { background: var(--k-panel-2); box-shadow: none; }
:root[data-theme="light"] .kit .k-scope { box-shadow: none; }
/* the coach's bar: a field on white, not a card */
:root[data-theme="light"] .kit .k-askb-bar { background: oklch(100% 0 0); box-shadow: inset 0 0 0 1px oklch(28% .02 286 / .14), 0 10px 30px -18px oklch(25% .03 286 / .25); }
/* Night on the main look's grey ground (`k-grey`: the learner's «Oggi» and «I miei progressi», whose page is the
   area pages' #151515): the panels grey with a breath of blue, a step above that ground, never navy (Tommi,
   2026-10-07: «non farli di sfondo blu scuro, ma farli in grigio», «molto più simili allo sfondo»). Day keeps its own. */
:root:not([data-theme="light"]) :is(.kit.k-grey, .k-grey .kit) {
  --k-ground: oklch(19.6% .003 262);        /* #151515, the main look's --bg-2 */
  --k-ground-2: oklch(21.4% .006 262);
  --k-panel: oklch(23% .008 262);
  --k-panel-2: oklch(25.8% .009 262);
  --k-panel-3: oklch(29% .01 262);
  --k-seg: oklch(14% .005 262 / .6);
  --k-white-ink: oklch(20% .01 262);
  --k-dial-bezel: oklch(29% .01 262);
  --k-dial-face: oklch(22% .008 262);
}

/* ---------- the pre-assessment branch's colour system, whole (Ale, 2026-10-08: «portare tutto il sistema di colori
   che c'è in quel sito, compreso le hero»): `workspace.css`'s tokens, day and night, mapped onto the kit's. Ink
   #000c1f, page white, raised white, mist #f3f3f3 for what sits inside, hairlines at 8%, the system blue, its
   green, amber and red; at night neutral greys (#151515 the page, #232326 raised), never navy. A card is raised
   with `--float-sm`, what floats over the page with `--float`. Later than the theme blocks above, and as specific
   as the most specific of them, so it wins on every page. ---------- */
:root:not([data-theme="light"]) :is(.kit, .kit.k-grey, .k-grey .kit) {
  --k-ground: #151515;
  --k-ground-2: #111111;
  --k-panel: #232326;
  --k-panel-2: #1c1c1e;
  --k-panel-3: #2c2c2f;
  --k-ink: #f5f5f7;
  --k-ink-2: rgb(245 245 247 / .78);
  --k-ink-3: rgb(245 245 247 / .6);
  --k-faint: rgb(245 245 247 / .38);
  --k-line: rgb(245 245 247 / .1);
  --k-line-soft: rgb(245 245 247 / .08);
  --k-line-2: rgb(245 245 247 / .16);
  --k-fill: rgb(245 245 247 / .05);
  --k-fill-2: rgb(245 245 247 / .09);
  --k-seg: rgb(245 245 247 / .06);
  --k-blue: #0a84ff;
  --k-blue-hover: #3fa0ff;
  --k-blue-text: #3fa0ff;
  --k-blue-veil: rgb(10 132 255 / .18);
  --k-blue-chip: rgb(10 132 255 / .24);
  --k-up: #3ddc97;
  --k-down: #ff6b5e;
  --k-warn: #ffbf47;
  --k-warn-veil: rgb(255 191 71 / .14);
  --k-red: #ff6b5e;
  --k-red-veil: rgb(255 107 94 / .14);
  --k-edge: 0 0 0 1px rgb(255 255 255 / .06), 0 8px 20px rgb(0 0 0 / .35);
  --k-shadow: 0 0 #0000;
  --k-float: 0 0 0 1px rgb(255 255 255 / .06), 0 24px 60px rgb(0 0 0 / .5);
}
:root[data-theme="light"] :is(.kit, .kit.k-grey, .k-grey .kit) {
  --k-ground: #ffffff;
  --k-ground-2: #f3f3f3;
  --k-panel: #ffffff;
  --k-panel-2: #f3f3f3;
  --k-panel-3: #e9e9e9;
  --k-ink: #000c1f;
  --k-ink-2: rgb(0 12 31 / .74);
  --k-ink-3: rgb(0 12 31 / .56);
  --k-faint: rgb(0 12 31 / .36);
  --k-line: rgb(0 12 31 / .08);
  --k-line-soft: rgb(0 12 31 / .07);
  --k-line-2: rgb(0 12 31 / .14);
  --k-fill: rgb(0 12 31 / .045);
  --k-fill-2: #ffffff;
  --k-seg: rgb(0 12 31 / .06);
  --k-blue: #0a84ff;
  --k-blue-hover: #0062e6;
  --k-blue-text: #0062e6;
  --k-blue-veil: rgb(10 132 255 / .1);
  --k-blue-chip: rgb(10 132 255 / .14);
  --k-ok: #0a84ff;
  --k-up: #12925e;
  --k-down: #d92d20;
  --k-warn: #b26a00;
  --k-warn-veil: rgb(240 163 32 / .14);
  --k-red: #d92d20;
  --k-red-veil: rgb(217 45 32 / .1);
  /* the card's shadow as it was (Ale, 2026-10-08: «un'ombra più forte, come era prima») */
  --k-edge: 0 1px 3px rgb(0 12 31 / .06), 0 12px 36px -8px rgb(0 12 31 / .16);
  --k-shadow: 0 0 #0000;
  --k-float: 0 1px 2px rgb(0 12 31 / .04), 0 4px 10px rgb(0 12 31 / .04), 0 18px 36px rgb(0 12 31 / .06), 0 40px 80px rgb(0 12 31 / .06);
}
.kit [class^="k-"], .kit [class*=" k-"] { box-sizing: border-box; }
.kit {
  font-family: var(--k-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Icon ---------- */
.kit .k-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ---------- Panel (.pn) ---------- */
.kit .k-panel {
  position: relative;
  border-radius: 16px;
  background: var(--k-panel);
  color: var(--k-ink);
  box-shadow: var(--k-edge), var(--k-shadow);
  padding: 20px;
  min-width: 0;
}
.kit .k-panel.is-flush { padding: 0; overflow: hidden; }
.kit .k-panel.is-raised { background: var(--k-panel-2); }
.kit .k-panel.is-big { border-radius: 20px; padding: 24px; }

/* ---------- Chip (.pill) ---------- */
.kit .k-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 580;
  line-height: 1;
  white-space: nowrap;
  background: var(--k-fill);
  color: var(--k-ink-2);
  font-variant-numeric: tabular-nums;
}
.kit .k-chip.is-lg { height: 28px; padding: 0 11px; font-size: 13.5px; border-radius: 8px; }
.kit .k-chip.ok { background: var(--k-ok-veil); color: var(--k-ok); }
.kit .k-chip.att { background: var(--k-warn-veil); color: var(--k-warn); }
.kit .k-chip.blu { background: var(--k-blue-chip); color: var(--k-blue-text); }
.kit .k-chip.red { background: var(--k-red-veil); color: var(--k-red); }
button.k-chip { cursor: pointer; }
.kit button.k-chip { border: 0; font: inherit; font-size: 12.5px; font-weight: 580; transition: background-color .25s var(--k-ui), color .25s var(--k-ui); }
.kit button.k-chip.is-lg { font-size: 13.5px; }
.kit button.k-chip:not(.ok):not(.att):not(.red):not(.blu):hover { background: var(--k-fill-2); color: var(--k-ink); }

/* ---------- Delta (.rp-d small) ---------- */
.kit .k-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--k-ink-3);
}
/* a change is the one place in green and red: up, and down (a little or a lot) */
.kit .k-delta.ok { color: var(--k-up); }
.kit .k-delta.att, .kit .k-delta.red { color: var(--k-down); }
.kit .k-delta .k-delta-since { font-weight: 400; color: var(--k-ink-3); }

/* ---------- Dial (.dial) ---------- */
.kit .k-dial { display: block; width: 100%; overflow: visible; }
.kit .k-dial .b1 { fill: var(--k-dial-bezel); stroke: var(--k-dial-bezel); stroke-width: 8; stroke-linejoin: round; }
.kit .k-dial .b2 { fill: var(--k-dial-face); stroke: var(--k-dial-face); stroke-width: 8; stroke-linejoin: round; }
.kit .k-dial .tk { stroke: var(--k-dial-tick); stroke-linecap: round; opacity: .6; }
.kit .k-dial .lo, .kit .k-dial .hi { fill: none; stroke-linecap: round; }
.kit .k-dial .lo { stroke: var(--k-dial-lo); }
.kit .k-dial .hi { stroke: var(--k-dial-hi); }
.kit .k-dial .nd { transform-box: view-box; transform-origin: 100px 100px; transition: transform 1.3s var(--k-needle); }
.kit .k-dial .nd line { stroke: var(--k-dial-needle); stroke-linecap: round; }
.kit .k-dial .nd rect, .kit .k-dial .nd circle { fill: var(--k-dial-face); stroke: var(--k-dial-needle); }
/* a dial with its number, name and delta (.rp-d) */
.kit .k-dial-tile {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 6px 8px;
  border-radius: 14px;
  text-align: center;
  color: inherit;
  transition: background-color .4s var(--k-ui), box-shadow .4s var(--k-ui);
}
.kit .k-dial-tile .k-dial { width: var(--k-dial-w, 132px); }
.kit .k-dial-tile b {
  margin-top: -10px;
  font-family: var(--k-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kit .k-dial-tile .k-dial-name { font-size: 14.5px; color: var(--k-ink-2); }
.kit .k-dial-tile .k-delta { min-height: 18px; }
.kit .k-dial-tile.is-small { --k-dial-w: 92px; }
.kit .k-dial-tile.is-small b { font-size: 30px; margin-top: -6px; }
.kit .k-dial-tile.is-small .k-dial-name { font-size: 13px; }
.kit button.k-dial-tile { cursor: pointer; }
.kit button.k-dial-tile:hover { background: var(--k-fill); }

/* ---------- MonthToggle (.rp-seg) ---------- */
.kit .k-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--k-seg); }
.kit .k-seg button {
  padding: 6px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--k-ink-3);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background-color .25s var(--k-ui), color .25s var(--k-ui);
}
.kit .k-seg button:hover { color: var(--k-ink-2); }
.kit .k-seg button[aria-pressed="true"] { background: var(--k-fill-2); color: var(--k-ink); }
:root[data-theme="light"] .kit .k-seg button[aria-pressed="true"] { box-shadow: 0 1px 3px oklch(30% .08 262 / .14), 0 0 0 1px oklch(28% .04 262 / .06); }

/* ---------- Ring (.nv-ring) ---------- */
.kit .k-ring { position: relative; display: grid; place-content: center; justify-items: center; width: var(--k-ring, 200px); aspect-ratio: 1; }
.kit .k-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.kit .k-ring circle { fill: none; stroke-width: 7; }
.kit .k-ring .bg { stroke: var(--k-fill-2); }
:root[data-theme="light"] .kit .k-ring .bg { stroke: var(--k-panel-3); }
.kit .k-ring .fg { stroke: var(--k-ok); stroke-linecap: round; stroke-dasharray: 1; }
.kit .k-ring.blu .fg { stroke: var(--k-blue); }
.kit .k-ring.att .fg { stroke: var(--k-warn); }
.kit .k-ring b { position: relative; font-family: var(--k-serif); font-size: calc(var(--k-ring, 200px) * .42); font-weight: 400; line-height: .85; font-variant-numeric: tabular-nums; }
.kit .k-ring small { position: relative; font-size: 15px; color: var(--k-ink-2); }

/* ---------- Avatar (.cl-face) ---------- */
.kit .k-avatar { flex: none; display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; overflow: hidden; }
.kit .k-avatar.is-ini { background: oklch(42% .09 var(--k-h, 262)); color: oklch(97% .01 var(--k-h, 262)); font-weight: 600; letter-spacing: .01em; }
:root[data-theme="light"] .kit .k-avatar.is-ini { background: oklch(90% .05 var(--k-h, 262)); color: oklch(32% .09 var(--k-h, 262)); }

/* the missing mark (`MISSING`): a hyphen in the sans, faint, even inside a serif figure */
.kit .k-none { font-family: var(--k-sans); font-weight: 500; color: var(--k-ink-3); }

/* ---------- Rows (.ch-a .ch-r, .pc-s, .rr-r) ---------- */
.kit .k-rows { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.kit .k-rows.is-boxed { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--k-line); overflow: hidden; }
.kit .k-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 16px;
  border: 0;
  color: inherit;
  text-align: start;
  font: inherit;
  font-size: 13.5px;
  width: 100%;
  background: none;
  transition: background-color .35s var(--k-ui);
}
/* the list's item: the hairline between rows, and room for a row's own «⋯» beside it */
.kit .k-row-item { display: flex; align-items: center; min-width: 0; border-top: 1px solid var(--k-line-soft); transition: background-color .35s var(--k-ui); }
.kit .k-rows > .k-row-item:first-child { border-top: 0; }
.kit .k-row-item > .k-row { flex: 1; min-width: 0; }
.kit a.k-row, .kit button.k-row { cursor: pointer; }
.kit a.k-row:hover, .kit button.k-row:hover { background: var(--k-fill); }
.kit .k-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kit .k-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit .k-row-title .k-dot { color: var(--k-ink-3); }
.kit .k-row-sub { font-size: 12px; color: var(--k-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit .k-row-sub.is-blu { color: var(--k-blue-text); }
.kit .k-row-end { display: inline-flex; align-items: center; gap: 10px; flex: none; }
/* a row's tone in the brand's blues (Tommi, 2026-10-07: no green or amber ground), from the tokens */
/* a ground, never a band down the left (Tommi, 2026-10-07: «AI slop») */
.kit .k-row.ok { background: var(--k-ok-veil); }
.kit .k-row.blu { background: rgb(10 132 255 / .12); }
.kit .k-row.att { background: var(--k-warn-veil); }
/* a row with its own control after it (Row `action`): the hairline and the hover belong to the pair */
.kit .k-row-item.has-action:hover { background: var(--k-fill); }
.kit .k-row-item.has-action > a.k-row:hover, .kit .k-row-item.has-action > button.k-row:hover { background: none; }
.kit .k-row-action { flex: none; display: inline-flex; padding-inline-end: 10px; }
/* the small square around a row's icon (.cl-ic) and the step's circle (.pc-s i) */
.kit .k-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--k-blue-chip); color: var(--k-blue-text); flex: none; }
.kit .k-ic.is-lg { width: 40px; height: 40px; border-radius: 11px; }
.kit .k-ic.is-plain { background: none; color: var(--k-ink-3); width: 22px; }
.kit .k-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--k-line-2); color: var(--k-ink-3); flex: none; }
.kit .k-mark.done { background: var(--k-ok-veil); box-shadow: none; color: var(--k-ok); }
.kit .k-mark.now { box-shadow: inset 0 0 0 1.5px var(--k-blue-text); color: var(--k-blue-text); }

/* ---------- StatRows (.rr-r) ---------- */
.kit .k-stat { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 20px; border-top: 1px solid var(--k-line-soft); font-size: 15.5px; }
.kit .k-stats > .k-stat:first-child { border-top: 0; }
.kit .k-stat > .k-icon { color: var(--k-ink-3); }
.kit .k-stat-label { flex: 1; min-width: 0; color: var(--k-ink); }
.kit .k-stat-label small { display: block; margin-top: 2px; overflow: hidden; font-size: 12.5px; color: var(--k-ink-3); white-space: nowrap; text-overflow: ellipsis; }
.kit .k-stat-value { display: grid; justify-items: end; gap: 2px; }
.kit .k-stat-value > b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- PageWrap: the one page container, for every look ----------
   A whole page or a page section owns its padding here and nowhere else; a card inside has none of its
   own. The same numbers at any width: 56px at the sides and 44px on top on a laptop, 20px and 24px on a
   phone. A wrap inside a wrap adds nothing. Main's `--pad` (the carousel's bleed, main-look.css) is
   `--k-page-x`, so the two always agree. */
.kit {
  --k-page-x: clamp(20px, 4vw, 56px);
  --k-page-top: clamp(24px, 3vw, 44px);
  --k-page-bottom: clamp(40px, 5vw, 72px);
}
.kit .k-page-wrap { padding: var(--k-page-top) var(--k-page-x) var(--k-page-bottom); }
.kit .k-page-wrap .k-page-wrap { padding: 0; }

/* ---------- Heads ---------- */
.kit .k-ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.kit .k-ask h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--k-ink); }
.kit .k-ask-bubble {
  width: max-content;
  max-width: 100%;
  margin: 0 0 16px auto;
  padding: 11px 17px;
  border-radius: 18px 18px 5px 18px;
  background: var(--k-bubble);
  color: var(--k-bubble-ink);
  font-size: 16px;
  font-weight: 560;
}
.kit .k-page-head { display: flex; align-items: flex-end; gap: 16px 20px; flex-wrap: wrap; margin: 0 0 28px; }
.kit .k-page-head-text { flex: 1; min-width: min(100%, 280px); display: grid; gap: 8px; }
.kit .k-page-head h1 {
  margin: 0;
  font-family: var(--k-serif);
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.022em;
  color: var(--k-ink);
  text-wrap: balance;
}
.kit .k-page-head-facts { font-size: 13.5px; line-height: 1.4; color: var(--k-ink-2); }
.kit .k-page-head-lead { flex: none; align-self: center; }
.kit .k-page-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kit .k-page-head.is-center { justify-content: center; text-align: center; }
.kit .k-page-head.is-center .k-page-head-text { flex: 0 1 auto; justify-items: center; }
.kit .k-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 16px -4px;
  padding: 4px 6px 4px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 560;
  color: var(--k-ink-3);
  text-decoration: none;
  cursor: pointer;
}
.kit .k-back:hover { color: var(--k-ink); }

/* ---------- Button (.cl-btn, base .btn) ---------- */
.kit .k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s var(--k-ui), box-shadow .2s var(--k-ui), transform .45s var(--k-spring);
}
.kit .k-btn:active { transform: scale(.96); transition-duration: .12s; }
/* What you press lifts under the pointer (Tommi, 2026-10-07: «on hover le cose si sollevino, non solo le card, ma
   pure i bottoni, ovviamente molto più leggermente», and «la cosa del corner radius ... on hover quasi tutto»): a
   button rises 2px (its corners stay: most are pills already), a card rises 5px and its corners round (its own CSS:
   posters, covers, shelf cards). Pressed, the press wins; not on touch, not with less motion. */
.kit :is(button.k-chip, .k-climb-toggle) { transition: transform .3s var(--k-spring), background-color .25s var(--k-ui), color .25s var(--k-ui); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kit :is(.k-btn, .k-end-pill, button.k-chip, .k-climb-toggle):not(:disabled):hover:not(:active) { transform: translateY(-2px); }
}
.kit .k-btn:disabled { opacity: .45; cursor: default; transform: none; }
.kit .k-btn.is-lg { height: 44px; padding: 0 20px; border-radius: 13px; font-size: 14.5px; }
.kit .k-btn.is-pill { border-radius: 999px; }
.kit .k-btn.is-full { display: flex; width: 100%; }
.kit .k-btn.primary { background: var(--k-blue); color: var(--k-on-blue); }
.kit .k-btn.primary:hover:not(:disabled) { background: var(--k-blue-hover); }
.kit .k-btn.white { background: var(--k-white); color: var(--k-white-ink); }
.kit .k-btn.white:hover:not(:disabled) { background: var(--k-white-hover); }
.kit .k-btn.ghost { background: transparent; color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line-2); }
.kit .k-btn.ghost:hover:not(:disabled) { background: var(--k-fill); }
.kit .k-btn.quiet { background: transparent; color: var(--k-blue-text); padding: 0 6px; }
.kit .k-btn.quiet:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 4px; }
.kit .k-btn.ok { background: var(--k-ok-veil); color: var(--k-ok); }

/* ---------- Tabs (.cs-roles) ---------- */
.kit .k-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.kit .k-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--k-fill);
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  color: var(--k-ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .35s var(--k-ui), color .35s var(--k-ui), box-shadow .35s var(--k-ui);
}
.kit .k-tab:hover { color: var(--k-ink-2); }
.kit .k-tab[aria-selected="true"] { background: rgb(10 132 255 / .3); color: var(--k-ink); box-shadow: inset 0 0 0 1px oklch(76% .12 256 / .45); }
:root[data-theme="light"] .kit .k-tab[aria-selected="true"] { background: var(--k-blue-veil); color: var(--k-blue-text); box-shadow: inset 0 0 0 1px oklch(52% .2 262 / .35); }
.kit .k-tab .k-tab-n { font-size: 12.5px; color: var(--k-ink-3); font-variant-numeric: tabular-nums; }
.kit .k-tab.is-add { background: none; box-shadow: inset 0 0 0 1px var(--k-line-2); color: var(--k-blue-text); }
/* a page's sections: words on a hairline, the lit one in ink over its own line */
.kit .k-tabs.is-line { flex-wrap: nowrap; gap: clamp(18px, 3vw, 34px); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--k-line); }
.kit .k-tabs.is-line::-webkit-scrollbar { display: none; }
.kit .k-tabs.is-line .k-tab { position: relative; height: 46px; padding: 0 1px; border-radius: 0; background: none; box-shadow: none; font-size: 14px; font-weight: 600; color: var(--k-ink-3); }
.kit .k-tabs.is-line .k-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--k-ink); transform: scaleX(0); transition: transform .35s var(--k-spring); }
.kit .k-tabs.is-line .k-tab:hover { color: var(--k-ink); }
.kit .k-tabs.is-line .k-tab[aria-selected="true"] { background: none; box-shadow: none; color: var(--k-ink); }
.kit .k-tabs.is-line .k-tab[aria-selected="true"]::after { transform: none; }

/* ---------- DocToSteps (V1 .fi-doc .fi-o) ---------- */
.kit .k-d2s { display: grid; grid-template-columns: minmax(150px, 210px) minmax(40px, 90px) minmax(0, 1fr); align-items: center; max-width: 620px; }
.kit .k-d2s-doc {
  position: relative;
  height: var(--k-d2s-h, 264px);
  padding: 20px;
  border-radius: 14px;
  background: var(--k-paper);
  color: var(--k-paper-ink);
  overflow: hidden;
  box-shadow: 0 40px 70px -34px #000;
}
:root[data-theme="light"] .kit .k-d2s-doc { box-shadow: 0 0 0 1px oklch(28% .04 262 / .08), 0 24px 50px -24px oklch(30% .08 262 / .35); }
.kit .k-d2s-doc h5 { margin: 0 0 14px; font-family: var(--k-serif); font-size: 25px; font-weight: 400; line-height: 1; }
.kit .k-d2s-doc i { display: block; height: 7px; margin: 0 0 8px; border-radius: 4px; background: oklch(25% .04 262 / .16); }
.kit .k-d2s-doc i.hl { background: oklch(45% .06 262 / .5); }
.kit .k-d2s-doc .k-d2s-mark { display: block; margin: 0 -8px 10px; padding: 8px 8px 1px; border-radius: 6px; background: oklch(88% .09 90 / .7); }
.kit .k-d2s-scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--k-blue); box-shadow: 0 -24px 40px oklch(55% .2 262 / .25); animation: k-scan 2.4s var(--k-ui) infinite alternate; }
@keyframes k-scan { from { top: 18%; } to { top: 92%; } }
.kit .k-d2s-links { width: 100%; height: 264px; overflow: visible; }
.kit .k-d2s-links path { fill: none; stroke: var(--k-line-2); stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke .4s var(--k-ui); }
.kit .k-d2s-links path.on { stroke: var(--k-blue-text); }
.kit .k-d2s-steps { display: grid; gap: 18px; }
.kit .k-d2s-step {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 76px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--k-panel-2);
  box-shadow: 0 0 0 1px var(--k-line);
  font-size: 16px;
  font-weight: 600;
  transition: opacity .45s var(--k-ui);
}
.kit .k-d2s-step.is-dim { opacity: .3; }
.kit .k-d2s-step .k-ic { width: 40px; height: 40px; border-radius: 11px; }
.kit .k-d2s-step small { display: block; font-size: 13px; font-weight: 400; color: var(--k-ink-3); }
@media (max-width: 560px) {
  .kit .k-d2s { grid-template-columns: 1fr; gap: 16px; }
  .kit .k-d2s-doc { height: 180px; }
  .kit .k-d2s-links { display: none; }
}
/* the paper alone, as a card's thumbnail (DocPaper small) */
.kit .k-d2s-doc.is-small { width: 92px; height: 118px; flex: none; padding: 11px 10px; border-radius: 9px; box-shadow: 0 18px 34px -18px #000; }
:root[data-theme="light"] .kit .k-d2s-doc.is-small { box-shadow: 0 0 0 1px oklch(28% .04 262 / .1), 0 12px 24px -14px oklch(30% .08 262 / .35); }
.kit .k-d2s-doc.is-small h5 { margin-bottom: 8px; font-size: 13.5px; line-height: 1.02; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kit .k-d2s-doc.is-small i { height: 4px; margin-bottom: 5px; }
.kit .k-d2s-doc.is-small .k-d2s-mark { margin: 0 -5px 6px; padding: 5px 5px 0; border-radius: 4px; }

/* ---------- KpiRow (.op-big: the serif figure, its small line) ---------- */
.kit .k-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-radius: 16px; background: var(--k-panel); box-shadow: var(--k-edge), var(--k-shadow); overflow: hidden; }
.kit .k-kpi { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 18px 20px 20px; box-shadow: -1px 0 0 var(--k-line-soft); }
.kit .k-kpi b { font-family: var(--k-serif); font-size: 46px; font-weight: 400; line-height: .95; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--k-ink); white-space: nowrap; }
.kit .k-kpi b small { margin-inline-start: 6px; font-family: var(--k-sans); font-size: 15px; letter-spacing: 0; color: var(--k-ink-3); }
.kit .k-kpi > span { font-size: 14px; color: var(--k-ink-3); }
.kit .k-kpi.ok b { color: var(--k-ok); }
.kit .k-kpi.att b { color: var(--k-warn); }
.kit .k-kpi.red b { color: var(--k-red); }
.kit .k-kpi.is-none b { color: var(--k-faint); }
@media (max-width: 560px) {
  .kit .k-kpis { grid-template-columns: 1fr 1fr; }
  .kit .k-kpi { box-shadow: -1px 0 0 var(--k-line-soft), 0 -1px 0 var(--k-line-soft); }
  .kit .k-kpi b { font-size: 38px; }
}

/* ---------- NoveltyRing (V3 .nv-new .nv-ring .nv-deps) ---------- */
.kit .k-nv { display: grid; justify-items: center; gap: 22px; }
.kit .k-nv-doc { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; padding: 10px 20px 10px 10px; border-radius: 16px; background: var(--k-panel-2); box-shadow: 0 0 0 1px var(--k-line); }
.kit .k-nv-doc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 600; }
.kit .k-nv-deps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 460px; }
.kit .k-nv-deps span { display: flex; align-items: center; gap: 10px; min-width: 0; height: 48px; padding: 0 16px; border-radius: 13px; background: var(--k-panel-2); box-shadow: 0 0 0 1px var(--k-line-soft); font-size: 15.5px; font-weight: 600; color: var(--k-faint); white-space: nowrap; overflow: hidden; }
.kit .k-nv-deps span .k-icon { opacity: 0; color: var(--k-ok); }
.kit .k-nv-deps span.on { transition: background-color .5s var(--k-ui), color .5s var(--k-ui); transition-delay: calc(1s + var(--k-nv-i, 0) * .45s); }
.kit .k-nv-deps span.on .k-icon { transform: scale(.4); transition: opacity .3s var(--k-ui), transform .55s var(--k-spring); transition-delay: calc(1s + var(--k-nv-i, 0) * .45s); }
.kit .k-nv.is-seen .k-nv-deps span.on { background: var(--k-ok-veil); color: var(--k-ink); }
.kit .k-nv.is-seen .k-nv-deps span.on .k-icon { opacity: 1; transform: none; }
@media (max-width: 420px) {
  .kit .k-nv-deps { grid-template-columns: 1fr; }
}

/* ---------- EmptyState ---------- */
.kit .k-empty { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; text-align: center; }
.kit .k-empty .k-icon { color: var(--k-ink-3); margin-bottom: 4px; }
.kit .k-empty b { font-size: 14.5px; font-weight: 600; color: var(--k-ink); }
.kit .k-empty p { margin: 0; max-width: 42ch; font-size: 13.5px; line-height: 1.45; color: var(--k-ink-3); }
.kit .k-empty .k-btn { margin-top: 8px; }

/* ---------- motion: what comes in rises, once (base.css .rv / @keyframes sale) ---------- */
.kit .k-rise { animation: k-rise .7s var(--k-out) backwards; }
@keyframes k-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kit .k-rise, .kit .k-d2s-scan { animation: none; }
  .kit .k-dial .nd, .kit .k-btn, .kit .k-tab, .kit .k-row { transition: none; }
  .kit .k-nv-deps span.on, .kit .k-nv-deps span.on .k-icon { transition: none; }
}

/* ── Skeletons: the page's shape while its data is on the way (skeleton.tsx) ── */
@keyframes k-shimmer {
  from { background-position: -420px 0; }
  to { background-position: 420px 0; }
}
@keyframes k-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.kit .k-bone {
  display: block;
  flex: none;
  background: linear-gradient(90deg, color-mix(in oklch, var(--k-ink) 7%, transparent) 25%, color-mix(in oklch, var(--k-ink) 14%, transparent) 37%, color-mix(in oklch, var(--k-ink) 7%, transparent) 63%);
  background-size: 840px 100%;
  animation: k-shimmer 1.4s ease-in-out infinite;
}
.kit .k-bone-lines { display: grid; gap: 10px; }
.kit .k-skel { display: grid; gap: 22px; animation: k-reveal .24s ease-out backwards; }
.kit .k-skel-head { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.kit .k-skel-head-text { flex: 1; display: grid; gap: 12px; }
.kit .k-skel-panel { display: grid; gap: 14px; }
.kit .k-skel-panel.is-flush { gap: 0; }
.kit .k-skel-title { margin-bottom: 4px; }
.kit .k-skel-rows { display: grid; }
.kit .k-skel-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--k-line-soft); }
.kit .k-skel-row:first-child { border-top: 0; }
.kit .k-skel-row-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.kit .k-skel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.kit .k-skel-dial { align-items: center; justify-items: center; text-align: center; padding: 26px 20px; }
.kit .k-skel-dial .k-bone-lines { width: 100%; justify-items: center; }
.kit .k-skel-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kit .k-skel-band { width: 100%; }
.kit .k-skel-dock { display: flex; gap: 10px; }
/* `backwards`, not `both`: a fill that outlives the animation leaves a transform (identity, but a
   transform) on the page, and every `position: fixed` inside it, a sheet's scrim first, stops at the
   page's edges instead of the window's (9 Oct, «Invite people» dimmed only the middle column). */
.kit .k-reveal { animation: k-reveal .28s ease-out backwards; }
@media (max-width: 720px) {
  .kit .k-skel-figures { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kit .k-bone { animation: none; background: color-mix(in oklch, var(--k-ink) 9%, transparent); }
  .kit .k-skel, .kit .k-reveal { animation: none; }
}