/* The kit screen (owner 07.10, canvas docs/design/ui-0710/kit/V11-Kanal/ «Левый канал»; the felt of V4 «Сукно», owner 07.10:
   no rim around it). A left channel of three plates (passives, souls, cards) opens drawers over the main area; the main area
   is the start cells (a strip with a shelf that slides down under it) over the recipes (the table and the chosen pair's cells).
   Every colour is a theme token (public/style.css :root, public/themes.css); a cell family's colour comes from .f-mc-* /
   --fam-mc-* (--c) as in the fight. Two rules keep every theme readable:
   — bare labels on the felt use --kt-felt-ink, the theme's own ink: every theme draws its felt against its ink (dark felt and
     light ink, or D2's parchment felt and dark ink), so the paper colour is not safe there (07.10: D2's felt turned light);
   — a sign with a colour family sits on that family's enamel (--e-top/--e-bot of .f-mc-*), the well the fight draws it in, so
     it reads as it does in the fight in every theme; a sign of no family (a passive, a soul or a card of no colour) sits on
     the felt in --kt-sign.
   The drawers move by clip-path and transform only, never by opacity: a paused animation (a hidden tab, the theme shots that
   freeze at 400 ms) must not leave a drawer or its items invisible. */

.kt { --kt-felt-ink: var(--c-ink); --kt-felt-ink-2: color-mix(in srgb, var(--c-ink-2) 30%, var(--c-ink));
  /* the secondary ink pulled a little towards the main one: some themes' --c-ink-2 is below AA on their own panel texture */
  --kt-ink-2: color-mix(in srgb, var(--c-ink-2) 50%, var(--c-ink));
  /* a sign of no family: the gold pulled towards the theme's ink, so it keeps 3:1 on the felt of the light themes too */
  --kt-sign: color-mix(in srgb, var(--c-gold) 70%, var(--c-ink));
  --kt-ease: cubic-bezier(.16, .84, .24, 1);
  /* the geometry the drawers sit on: .kt-in's padding, the channel's width, the gaps, the strip's height */
  --kt-px: 46px; --kt-top: 104px; --kt-chan: 400px; --kt-strip: 112px;
  position: absolute; inset: 0; z-index: 40; color: var(--c-ink); font: var(--fw-med) 16px/1.35 var(--font-body); background: var(--c-bg); }
/* the felt, edge to edge (owner 07.10: «рамку вокруг надо убрать») */
.kt-felt { position: absolute; inset: 0; pointer-events: none; background: var(--tex-felt); box-shadow: inset 0 0 120px rgba(var(--c-shadow-rgb), .5); }
.kt-felt::after { content: ""; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(115deg, rgba(var(--c-hi-rgb), .012) 0 2px, transparent 2px 5px); }
.kt-in { position: absolute; inset: 0; padding: 26px var(--kt-px) 22px; display: grid; grid-template-columns: var(--kt-chan) minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr) 62px; gap: 14px 20px; }

.kt .cap { font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--kt-ink-2); }
.kt-n { font: var(--fw-semi) 14px/1 var(--font-num); color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt-tx { margin: 0; font-size: 14px; line-height: 1.38; color: var(--kt-ink-2); }
.kt-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 0 1.5px rgba(var(--c-shadow-rgb), .6); }
.kt-en { width: 34px; height: 34px; border-radius: 7px; }
.kt-en.lg { width: 54px; height: 54px; border-radius: 10px; }
.kt-en.md { width: 42px; height: 42px; border-radius: 9px; }
.kt-rom { font: var(--fw-bold) 14px/1 var(--font-display); letter-spacing: .22em; color: var(--kt-ink-2); }
.kt-ph { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.kt-ph h2 { margin: 0; font: var(--fw-bold) 24px/1 var(--font-display); color: var(--c-ink); }
.kt-open { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--kt-ink-2); transition: color .2s; }
.kt-open svg { transition: transform .35s var(--kt-ease); }
.kt-x { flex: none; margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--kt-ink-2); background: rgba(var(--c-bg-rgb), .35); box-shadow: inset 0 0 0 1px var(--c-line); }
.kt-x:hover { color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-accent-2); }

/* header: the title and the presets sit on the felt */
.kt-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }
.kt-ht { display: flex; flex-direction: column; gap: 7px; min-width: 230px; }
.kt-ht h1 { margin: 0; font: var(--fw-bold) 34px/1 var(--font-display); color: var(--kt-felt-ink); }
.kt .kt-ht .cap, .kt .kt-from > .cap, .kt .kt-ax { color: var(--kt-felt-ink-2); }
.kt-from { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.kt-pre { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px 0 11px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: var(--fw-semi) 16px/1 var(--font-body); color: var(--c-ink); background: var(--c-surface); box-shadow: inset 0 0 0 var(--bw) var(--c-line); }
.kt-pre:hover { box-shadow: inset 0 0 0 var(--bw) var(--c-accent); }
.kt-pre.on { color: var(--c-ink); background: rgba(var(--c-accent-rgb), .1); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2); }
.kt-ed { font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 9px; background: var(--c-on-accent); color: var(--c-accent); }
.kt-acts { display: flex; align-items: center; gap: 8px; }
/* the workshop (owner 22.10, canvas «Мастерская» D3/D4): the build's name in the title, and in place of «Начать с» the plate of
   the build that opens all the builds over the kit */
.kt-nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kt-nm h1 { margin: 0; font: var(--fw-bold) 34px/1 var(--font-display); color: var(--kt-felt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
.kt-ren { flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--r-sm); cursor: pointer; font: var(--fw-semi) 18px/1 var(--font-body); color: var(--c-ink); background: var(--c-surface); box-shadow: inset 0 0 0 var(--bw) var(--c-line); }
.kt-ren:hover, .kt-ren:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--bw) var(--c-accent-2); }
.kt-bplate { flex: 1 1 0; min-width: 0; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 18px 0 8px; border: 0; border-radius: var(--r-md); cursor: pointer; text-align: left;
  color: var(--c-ink); background: var(--c-surface); box-shadow: inset 0 0 0 var(--bw-strong) color-mix(in srgb, var(--hue) 60%, var(--c-line)); }
.kt-bplate:hover, .kt-bplate:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), 0 8px 24px rgba(var(--c-shadow-rgb), .4); }
.kt-bplate .bcard-crest { width: 44px; height: 44px; }
.kt-bplate > b { flex: none; font: var(--fw-bold) 22px/1 var(--font-display); white-space: nowrap; }
.kt-bplate-sub { flex: 1 1 0; min-width: 0; font: var(--fw-med) 16px/1.2 var(--font-body); color: var(--kt-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-bplate-go { flex: none; margin-left: auto; font: var(--fw-bold) 17px/1 var(--font-body); color: var(--c-accent-2-tx); }
.klib-shade { position: absolute; inset: 0; z-index: 50; background: var(--c-overlay); }
.klib { position: absolute; left: 30px; right: 30px; top: 100px; bottom: 20px; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--c-surface-rgb), .99), rgba(var(--t-bg-7-rgb), .99)); box-shadow: inset 0 0 0 var(--bw) rgba(var(--c-ink-rgb), .17), 0 24px 60px var(--c-shadow); }
.klib > .kt-bplate.open { flex: none; height: 64px; border-radius: 0; background: rgba(var(--c-accent-rgb), .08); }
.klib-in { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 18px 26px 22px; }
.klib-in > .bbr { flex: 1; }
.modal.bren .bname { width: 100%; height: 52px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: var(--c-bg-2); color: var(--c-ink); font: var(--fw-bold) 26px var(--font-display); margin-bottom: 16px; }
/* the verdict beside «Готово» (owner 08.10: «Сборка в порядке» was a tiny pill): the size of a button, its own colour */
.kt-st { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 20px 8px 14px; border-radius: var(--r-md); font: var(--fw-bold) 18px/1.2 var(--font-body); max-width: 620px; background: var(--c-surface); }
.kt-st svg { flex: none; }
.kt-st.ok { color: var(--c-ok); background: rgba(var(--c-ok-rgb), .1); box-shadow: inset 0 0 0 1.5px rgba(var(--c-ok-rgb), .6); }
.kt-st.bad { color: var(--c-danger); background: rgba(var(--c-danger-rgb), .1); box-shadow: inset 0 0 0 1.5px rgba(var(--c-danger-rgb), .7); animation: kt-nudge .45s var(--kt-ease); }
@keyframes kt-nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }

/* ---- the left channel: three plates of unequal height */
.kt-chan { grid-column: 1; grid-row: 2; min-height: 0; display: grid; grid-template-rows: 226fr 404fr 298fr; gap: 12px; position: relative; z-index: 8; }
.kt-plate { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 0; border-radius: var(--r-lg); cursor: pointer; text-align: left; color: inherit; font: inherit;
  background: var(--tex-panel); box-shadow: inset 0 0 0 var(--bw) var(--c-line), var(--shadow-1); transition: box-shadow .25s, transform .3s var(--kt-ease); }
.kt-plate:hover { box-shadow: inset 0 0 0 1.5px var(--c-accent), var(--shadow-1); }
.kt-plate:hover .kt-open, .kt-plate.on .kt-open, .kt-strip:hover .kt-open { color: var(--c-accent-tx); }
.kt-plate.on { transform: translateX(4px); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), var(--shadow-glow); }
.kt-plate.on .kt-open svg { transform: rotate(180deg); }
/* the bridge from an open plate into its drawer */
.kt-plate::after { content: ""; position: absolute; right: -16px; top: 50%; width: 16px; height: 64px; margin-top: -32px; border-radius: 0 8px 8px 0; pointer-events: none;
  background: var(--c-surface-2); box-shadow: inset 0 2px 0 var(--c-accent-2), inset 0 -2px 0 var(--c-accent-2); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--kt-ease); }
.kt-plate.on::after { transform: scaleX(1); }
.kt-sqs { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 8px; }
.kt-sq { position: relative; border: 0; border-radius: var(--r-lg); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; text-align: center;
  color: var(--c-gold); background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface)); box-shadow: inset 0 0 0 var(--bw) var(--c-line), var(--shadow-1); transition: transform .12s; }
.kt-chan .kt-sq { cursor: inherit; }
.kt-sq.on { background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface-3)); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent), var(--shadow-1); }
.kt-sq b { font: var(--fw-bold) 18px/1.05 var(--font-display); color: var(--c-ink); max-width: 100%; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-sq i { font: var(--fw-semi) 14px/1 var(--font-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--kt-ink-2); }
.kt-sq.none { color: var(--kt-ink-2); border: 1.5px dashed var(--c-line-strong); background: transparent; box-shadow: none; }
.kt-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 5px 9px; border-radius: 9px; white-space: nowrap;
  font: var(--fw-bold) 14px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-on-accent); background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); }
.kt-rows { display: flex; flex-direction: column; gap: 8px; }
.kt-rows.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; }
.kt-row { position: relative; display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 5px 10px 5px 6px; border-radius: var(--r-md); background: rgba(var(--c-bg-rgb), .3); box-shadow: inset 0 0 0 1px var(--c-line); }
.kt-rows .kt-row { flex: 1 1 0; }
.kt-row > b, .kt-rowt b { font: var(--fw-bold) 18px/1.1 var(--font-display); color: var(--c-ink); min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.kt-row > b { flex: 1 1 0; }
.kt-row > .well, .kt-row > .kt-gem { flex: none; }
.kt-rows.two .kt-row { gap: 6px; padding-right: 8px; }
.kt-rows.two .kt-row > b { font-size: 14px; letter-spacing: 0; }
.kt-rowt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kt-rowt i { font: var(--fw-semi) 14px/1 var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--kt-ink-2); }
.kt-row .kt-gem { position: static; margin-left: auto; width: 24px; height: 24px; font-size: 14px; }
.kt-row.none { justify-content: center; color: var(--kt-ink-2); background: transparent; border: 1.5px dashed var(--c-line-strong); box-shadow: none; font: var(--fw-semi) 14px/1 var(--font-body); }

/* ---- the main area: the strip of start cells over the recipes */
.kt-main { grid-column: 2; grid-row: 2; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.kt-strip { position: relative; z-index: 4; flex: none; height: var(--kt-strip); display: flex; align-items: center; gap: 16px; padding: 0 20px; border-radius: var(--r-lg); cursor: pointer;
  background: var(--tex-panel); box-shadow: inset 0 0 0 var(--bw) var(--c-line), var(--shadow-1); transition: box-shadow .25s; }
.kt-strip:hover { box-shadow: inset 0 0 0 1.5px var(--c-accent), var(--shadow-1); }
.kt-strip.on { cursor: pointer; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), var(--shadow-glow); }
.kt-stl { width: 160px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.kt-stl h2 { margin: 0; font: var(--fw-bold) 24px/1.05 var(--font-display); color: var(--c-ink); }
.kt-socks { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; height: 84px; }
.kt-ms { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px 8px 6px; border-radius: var(--r-md);
  color: var(--kt-ink-2); font: var(--fw-semi) 14px/1.1 var(--font-body); background: rgba(var(--c-surface-rgb), .82); box-shadow: inset 0 2px 8px rgba(var(--c-shadow-rgb), .45), inset 0 0 0 1.5px var(--c-line);
  transition: transform .2s var(--kt-ease), box-shadow .2s; touch-action: none; user-select: none; }
.kt-ms small { position: absolute; top: 7px; left: 10px; font: var(--fw-semi) 14px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--kt-ink-2); }
.kt-ms b { font: var(--fw-bold) 16px/1 var(--font-display); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kt-ms.free b { font: var(--fw-semi) 14px/1 var(--font-body); color: var(--kt-ink-2); }
.kt-ms.full { background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface)); box-shadow: inset 0 0 0 1.5px var(--c), var(--shadow-1); }
.kt-strip.on .kt-ms.full { cursor: grab; }
.kt-strip.on .kt-ms.free { cursor: pointer; box-shadow: inset 0 2px 8px rgba(var(--c-shadow-rgb), .45), inset 0 0 0 1.5px var(--c-accent); }
.kt-ms.target { transform: translateY(-3px); box-shadow: inset 0 0 0 2.5px var(--c-accent-2), var(--shadow-glow) !important; }
.kt-ms.lift { opacity: .35; }
.kt-plus { font: 300 24px/1 var(--font-body); color: var(--c-ink); }
.kt-out { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--kt-ink-2); background: rgba(var(--c-shadow-rgb), .45); }
.kt-out:hover { color: var(--c-danger); }
.kt-sth { width: 200px; flex: none; font-size: 14px; }

.kt-rec { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: 40px minmax(0, 1fr); gap: 14px 22px; padding: 16px 22px 20px; border-radius: var(--r-lg);
  background: var(--tex-panel); box-shadow: inset 0 0 0 var(--bw) var(--c-line), var(--shadow-1); }
.kt-rec > .kt-ph { grid-column: 1 / -1; gap: 14px; }
.kt-rec .kt-mt { width: 320px; margin-left: auto; flex: none; }
.kt-tb { min-height: 0; display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)); grid-template-rows: 66px repeat(4, minmax(0, 1fr)); gap: 10px; }
.kt-ch { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding-bottom: 4px; }
.kt-ch .row, .kt-rxi { display: flex; gap: 5px; flex-wrap: wrap; }
.kt-vn { display: flex; align-items: center; gap: 9px; font: var(--fw-bold) 16px/1 var(--font-body); color: var(--c-ink); }
.kt-ax { align-self: end; padding-bottom: 8px; }
.kt-rx { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 13px; border: 0; border-radius: var(--r-md); cursor: pointer; text-align: left; color: var(--c-ink);
  background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface)); box-shadow: inset 0 0 0 1px var(--c-line), inset 0 3px 0 var(--c), var(--shadow-1); transition: transform .2s var(--kt-ease); }
.kt-rx:hover { box-shadow: inset 0 0 0 1.5px var(--c), inset 0 3px 0 var(--c), var(--shadow-1); }
.kt-rx.on { background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface-3)); box-shadow: inset 0 0 0 var(--bw-strong) var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent), var(--shadow-1); }
.kt-rx.none { opacity: .78; }
.kt-rx.blank { background: none; box-shadow: none; cursor: default; }
.kt-rx > b { font: var(--fw-bold) 18px/1 var(--font-display); color: var(--c-ink); }
.kt-rxn { font-size: 14px; line-height: 1.25; color: var(--kt-ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kt-rxf { margin-top: auto; display: flex; justify-content: space-between; font: var(--fw-semi) 14px/1 var(--font-num); color: var(--kt-ink-2); }
/* the per-mix limit (owner 07.10 «давай А»): «2 из 2» turns the accent ink, so the cap is seen before it bites */
.kt-rx.full .kt-lim, .kt-lim.full { color: var(--c-accent-tx); font-weight: var(--fw-bold); }

/* the chosen pair's cells, with their texts */
.kt-opt { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-md); background: rgba(var(--c-bg-rgb), .3); box-shadow: inset 0 0 0 1.5px var(--c); }
.kt-opth { display: flex; align-items: center; gap: 9px; }
.kt-opth h3 { margin: 0; font: var(--fw-bold) 24px/1 var(--font-display); color: var(--c-ink); }
.kt-opth .kt-n { margin-left: auto; }
.kt-cql { flex: 1 1 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.kt-cq { position: relative; flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 0; border-radius: var(--r-md); cursor: pointer; text-align: left;
  color: var(--c-ink); background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface)); box-shadow: inset 0 0 0 1px var(--c-line), var(--shadow-1); transition: transform .2s var(--kt-ease); }
.kt-cq:hover { box-shadow: inset 0 0 0 1.5px var(--c-accent), var(--shadow-1); }
.kt-cq.on { background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface-3)); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent), var(--shadow-1); }
.kt-cq.off { opacity: .55; filter: saturate(.3); cursor: not-allowed; }
.kt-cqt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kt-cqt > b { font: var(--fw-bold) 18px/1.05 var(--font-display); color: var(--c-ink); }
.kt-cqt i { font: var(--fw-semi) 14px/1 var(--font-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--kt-ink-2); }
.kt-cqt .kt-tx { font-size: 14px; }
.kt-why { font: var(--fw-semi) 14px/1.25 var(--font-body); color: var(--c-danger); }
.kt-cqs { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kt-cqs .kt-gem, .kt-cqs .kt-tick { position: static; }
.kt-cq.off .kt-gem { color: var(--c-paper); background: var(--c-danger); }
.kt-gem { position: absolute; top: -9px; right: -9px; z-index: 2; width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: var(--fw-bold) 14px/1 var(--font-num); color: var(--c-ink); background: var(--c-surface-2); box-shadow: 0 0 0 2px var(--c-bg), inset 0 0 0 var(--bw) var(--c-line-strong); } /* a price is a number, not a call to act: no brass (owner 07.10) */
.kt-tick { position: absolute; top: -9px; left: -9px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--c-on-accent); background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); box-shadow: 0 0 0 2px var(--c-bg); }
.kt-note { font-size: 14px; color: var(--kt-ink-2); }
.kt-note.bad { color: var(--c-danger); }

/* the budget */
.kt-mt { display: flex; flex-direction: column; gap: 7px; }
.kt-mth { display: flex; align-items: baseline; justify-content: space-between; }
.kt-mth b { font: var(--fw-bold) 18px/1 var(--font-num); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.kt-mth small { font-weight: var(--fw-med); font-size: 14px; color: var(--kt-ink-2); }
.kt-bar { position: relative; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(var(--c-bg-2-rgb), .9); box-shadow: inset 0 1px 3px rgba(var(--c-shadow-rgb), .8), inset 0 0 0 1px var(--c-line); }
.kt-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); transition: width .35s var(--kt-ease); }
.kt-mt.full .kt-bar i { background: var(--c-ok); }
.kt-mt.over .kt-bar i { background: var(--c-danger); }

/* ---- the drawers: a channel part's choice slides out of the channel over the main area; the shelf slides down from the strip */
/* a part's section stands in the main area in place of the start cells and the recipes (owner 08.10: no drawer over the screen) */
.kt-drw { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--tex-panel); background-color: var(--c-surface); }
.kt-side { flex: 1 1 0; min-height: 0; padding: 22px 26px; border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1.5px var(--c-accent), var(--shadow-2); }
.kt-side.new { animation: kt-open .55s var(--kt-ease); }
.kt-side.out { animation: kt-fold .24s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes kt-open { from { clip-path: inset(0 100% 0 0 round var(--r-lg)); } to { clip-path: inset(0 0 0 0 round var(--r-lg)); } }
@keyframes kt-fold { from { clip-path: inset(0 0 0 0 round var(--r-lg)); } to { clip-path: inset(0 100% 0 0 round var(--r-lg)); } }
/* the light that runs along the opening edge */
.kt-side::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 2px; pointer-events: none; transform: translateX(-10px);
  background: linear-gradient(180deg, transparent, var(--c-accent-2) 30%, var(--c-hi) 50%, var(--c-accent-2) 70%, transparent); box-shadow: 0 0 24px 4px rgba(var(--c-accent-2-rgb), .55); visibility: hidden; }
.kt-side.new::after { animation: kt-sweep .55s var(--kt-ease); }
@keyframes kt-sweep { from { left: 0; visibility: visible; } 90% { visibility: visible; } to { left: 100%; visibility: hidden; } }
.kt-drw.new .kt-it { animation: kt-rise .5s var(--kt-ease) backwards; animation-delay: calc(140ms + var(--i) * 22ms); }
@keyframes kt-rise { from { transform: translateY(14px) scale(.97); } to { transform: none; } }
.kt-shelf { flex: 1 1 0; min-height: 0; margin-top: -14px; padding: 20px 24px; border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), var(--shadow-2); }
.kt-shelf.new { animation: kt-drop .5s var(--kt-ease); }
.kt-shelf.out { animation: kt-lift .24s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes kt-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes kt-lift { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }
.kt-poph { display: flex; align-items: center; gap: 14px; }
.kt-poph h2 { margin: 0; font: var(--fw-bold) 34px/1 var(--font-display); color: var(--c-ink); }
.kt-poph > .kt-tx { max-width: 70ch; }
.kt-popb { flex: 1 1 0; min-height: 0; overflow: auto; padding: 14px 6px 6px 12px; margin: 0 -6px 0 -12px; }
.kt-deck { display: flex; flex-wrap: wrap; gap: 20px 16px; align-content: flex-start; }
.kt-deck .card { position: relative; flex: none; cursor: pointer; transform: none; }
.kt-deck .card:hover { transform: none; box-shadow: 0 0 0 2px var(--c-accent-2), var(--shadow-glow); }
.kt-deck .card.kt-on { box-shadow: 0 0 0 3px var(--c-accent), var(--shadow-glow); }
.kt-deck .card.kt-off { filter: grayscale(.75) brightness(.62); cursor: not-allowed; }
.kt-deck .card.kt-in { box-shadow: 0 0 0 3px var(--c-accent); transform: translateY(-4px); }
.kt-deck .card.kt-swap { outline: 2px dashed var(--c-accent); outline-offset: 3px; }
.kt-deck .card.kt-wait { filter: saturate(.45) brightness(.85); }
.kt-deck .card.kt-wait:hover { filter: none; }
.kt-deck .card .kt-gem { top: auto; bottom: -10px; right: -10px; }
.kt-deck .card .kt-tick { top: -10px; left: -10px; }
/* 15 class cards in three rows, 12 souls in two: the fight's card, a little smaller */
.kt-side .kt-deck .card { zoom: .86; }
.kt-filt { display: flex; gap: 6px; flex-wrap: wrap; }
.kt-sqg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px 14px; padding-top: 10px; }
.kt-sqg .kt-sq { height: 132px; }
/* hover never moves an item (owner 22.10: a lifted item slid out from under the pointer at its edges and corners and jittered;
   the old 8 px band under it covered the bottom edge only): it lights instead */
.kt-sq:hover { box-shadow: inset 0 0 0 1.5px var(--c-accent), var(--shadow-1); }
.kt-sq.foc { box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), var(--shadow-glow); }
.kt-psl { display: flex; gap: 14px; }
.kt-pslot { flex: 1 1 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-md); background: rgba(var(--c-bg-rgb), .3); box-shadow: inset 0 0 0 1px var(--c-line); }
.kt-pslot > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.kt-pslot > div > b { font: var(--fw-bold) 24px/1 var(--font-display); color: var(--c-ink); }
.kt-pslot .kt-tx { font-size: 14px; }
.kt-pf { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r-md); background: rgba(var(--c-bg-rgb), .3); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.kt-pf > div { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; }
.kt-pf > div > b { font: var(--fw-bold) 24px/1 var(--font-display); color: var(--c-ink); }
.kt-ccs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kt-cc { position: relative; display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px; border: 0; border-radius: var(--r-md); cursor: grab; text-align: left; color: inherit; touch-action: none; user-select: none;
  background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface)); box-shadow: inset 0 0 0 1px var(--c-line), inset 3px 0 0 var(--c), var(--shadow-1); transition: transform .2s var(--kt-ease); }
.kt-cc:hover { box-shadow: inset 0 0 0 1.5px var(--c-accent), inset 3px 0 0 var(--c), var(--shadow-1); }
.kt-cc.held { transform: translateY(-3px); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), inset 3px 0 0 var(--c), var(--shadow-glow); }
.kt-cc i { display: block; font: var(--fw-semi) 14px/1 var(--font-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--kt-ink-2); margin-bottom: 4px; }
.kt-cc > span > b { display: block; font: var(--fw-bold) 18px/1.05 var(--font-display); color: var(--c-ink); margin-bottom: 5px; }
.kt-cc .kt-tx { font-size: 14px; }
.kt-shf { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.kt-shf .kt-note { margin-right: auto; }
.kt-ghost { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--r-md);
  background: linear-gradient(165deg, var(--c-surface-2), var(--c-surface-3)); box-shadow: inset 0 0 0 var(--bw-strong) var(--c-accent-2), var(--shadow-2); }
.kt-ghost b { font: var(--fw-bold) 18px/1 var(--font-display); color: var(--c-ink); }
/* import / export */
.kt-code { width: 100%; font: 15px/1.4 ui-monospace, monospace; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--c-line-strong); background: var(--c-bg-2); color: var(--c-ink); word-break: break-all; }
.kt-err { color: var(--c-danger); min-height: 1.2em; margin: 0; }
/* the bottom bar (owner 07.10): the verdict, the budgets big, «…», «Отмена», «Готово» — the main button bottom right */
.kt-f { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.kt-fa { display: flex; align-items: center; gap: 10px; }
/* «Строка сборки»: this build's string over the field for another one */
.kt-str { display: flex; flex-direction: column; gap: 10px; }
.kt-str .cap { margin-top: 8px; }
.kt-str .row { display: flex; gap: 10px; }
/* the cards plate's line of the always-carried cards: normal case and small, so it never runs over the plate's edge */
.kt .kt-plate-cards > .cap { text-transform: none; letter-spacing: .02em; font-weight: var(--fw-med); line-height: 1.3; }

/* a cell that lifts on hover: the lift would carry its bottom edge off the pointer resting on it, the hover would drop,
   the cell would fall back under the pointer and lift again (a twitch). While hovered, an invisible strip as tall as
   the lift stays under it (it moves with the cell), so the pointer never leaves the element it lifted */

/* 18.10 «Новые ячейки (тест)»: the marked «Тест» group of the kit screen */