/* kit.css: styles for js/kit.js (encrypt, generate, flip, tip, timeline, codetabs). Monochrome, hairlines,
   transform, opacity and a little blur only. Reduced motion: every component is static (kit.js also skips it). */

/* ---------- encrypt ---------- */
.kit-cred { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.84rem; color: var(--text-3); }
.kit-cred code { font-size: 0.8rem; white-space: pre; }
.kit-enc-c { display: inline-block; }
.kit-enc-c.is-scr { color: var(--text-3); }

/* ---------- generate (quote words blur in) ---------- */
.js .kit-gen .kit-gen-w { display: inline-block; opacity: 0; filter: blur(8px); }
.js .kit-gen.in .kit-gen-w { opacity: 1; filter: none; transition: opacity 0.5s var(--ease), filter 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }

/* ---------- flip (layout text flip) ---------- */
.kit-flip-on { display: inline-block; vertical-align: baseline; }
.kit-flip-box {
  position: relative; display: inline-block; vertical-align: baseline; box-sizing: content-box;
  width: var(--w, auto); padding: 0 0.28em; margin-inline: 0.04em; overflow: clip; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg);
  transition: width 0.3s var(--ease);
}
.kit-flip-w { display: inline-block; white-space: nowrap; transition: opacity 0.22s var(--ease), transform 0.32s var(--ease), filter 0.22s var(--ease); }
.kit-flip-w.is-out { opacity: 0; transform: translateY(-0.35em); filter: blur(4px); }
.kit-flip-w.is-in { opacity: 0; transform: translateY(0.35em); filter: blur(4px); transition: none; }
.kit-flip-measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }

/* ---------- tip (animated tooltip on the author avatar) ---------- */
.kit-by { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.kit-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); cursor: default;
  font: 600 0.82rem/1 var(--font-display); letter-spacing: 0.01em;
  transition: border-color 0.2s var(--ease), transform 0.3s var(--ease);
}
.kit-avatar:hover, .kit-avatar.is-tip { border-color: var(--text-3); transform: scale(1.05); }
.kit-avatar:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 50%; }
.kit-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; display: grid; gap: 1px; padding: 7px 12px;
  border-radius: var(--r-m); background: var(--text); color: var(--bg); white-space: nowrap; pointer-events: none;
  font: 400 0.76rem/1.3 var(--font); text-align: center;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateX(var(--tx, 0px)) rotate(var(--rot, 0deg)) translateY(6px) scale(0.92);
  transition: opacity 0.16s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.16s;
}
.kit-tip b { font-weight: 600; font-size: 0.84rem; }
.kit-tip span { opacity: 0.72; }
.kit-tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
.kit-avatar.is-tip .kit-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateX(var(--tx, 0px)) rotate(var(--rot, 0deg)); transition: opacity 0.16s var(--ease), transform 0.3s var(--ease), visibility 0s; }
.kit-tip ::selection, .kit-tip::selection { background: var(--sel-inv-bg); color: var(--sel-inv-fg); }

/* ---------- timeline (scroll beam beside numbered steps) ---------- */
.kit-tl-on { position: relative; }
.kit-tl-on::before, .kit-tl-on::after {
  content: ""; position: absolute; left: 84px; top: 0; bottom: 0; width: 1px; pointer-events: none;
}
.kit-tl-on::before { background: var(--line-strong); }
.kit-tl-on::after { width: 2px; margin-left: -0.5px; background: var(--text); transform-origin: top; transform: scaleY(var(--p, 0)); }
.kit-tl-on.kit-tl-static::after { display: none; }
.kit-tl-on > li { position: relative; }
.kit-tl-on > li > :first-child::before {
  content: ""; position: absolute; left: 80px; top: 27px; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--text-3); background: var(--bg); transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.3s var(--ease);
}
.kit-tl-on > li.is-past > :first-child::before { background: var(--text); border-color: var(--text); transform: scale(1.12); }
.kit-tl-on > li > * { transition: opacity 0.3s var(--ease); }
.kit-tl-on:not(.kit-tl-static) > li:not(.is-past) > * { opacity: 0.55; }
.kit-tl-on > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 40px; }
@media (max-width: 559px) {
  .kit-tl-on::before, .kit-tl-on::after { left: 56px; }
  .kit-tl-on > li > :first-child::before { left: 52px; }
  .kit-tl-on > li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 28px; padding-left: 14px; }
}

/* ---------- codetabs (code block with file tabs) ---------- */
.docs-hint { margin-top: 8px; font-size: 0.86rem; color: var(--text-3); }
.kit-ct { border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--bg-2); }
.kit-ct-bar { display: flex; gap: 2px; overflow-x: auto; padding: 0 6px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.kit-ct-bar::-webkit-scrollbar { display: none; }
.kit-ct-tab {
  position: relative; flex: none; min-height: 40px; padding: 0 10px; border: 0; background: none; color: var(--text-3);
  font: 500 0.8rem/1 var(--font); cursor: pointer; transition: color 0.15s var(--ease);
}
.kit-ct-tab:hover { color: var(--text); }
.kit-ct-tab[aria-selected="true"] { color: var(--text); }
.kit-ct-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 1.5px; background: var(--text); }
.kit-ct-tab:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; border-radius: var(--r-s); }
.kit-ct .codefile { border: 0; border-radius: 0; }
.kit-ct.kit-ct-on .codefile + .codefile { border-top: 0; }
.kit-ct:not(.kit-ct-on) .codefile + .codefile { border-top: 1px solid var(--line); }
.kit-ct pre .kit-hl { display: inline-block; min-width: calc(100% + 32px); margin-inline: -16px; padding-inline: 13px 16px; border-left: 3px solid var(--text-3); background: var(--sunken); }
.kit-ct [role="tabpanel"]:not([hidden]) { animation: kit-fade 0.2s var(--ease); }
@keyframes kit-fade { from { opacity: 0; filter: blur(3px); } }

@media (prefers-reduced-motion: reduce) {
  .js .kit-gen .kit-gen-w { opacity: 1; filter: none; transition: none; }
  .kit-flip-box, .kit-flip-w, .kit-avatar, .kit-tip, .kit-tl-on > li > *, .kit-tl-on > li > :first-child::before { transition: none; }
  .kit-ct [role="tabpanel"]:not([hidden]) { animation: none; }
}