/* ============================================================================
   exotic — css/kit/kit.css · cherry-picked kit pieces (2026-07-20)
   Four keepers from the design audit, reconciled with the language-cleanup
   branch so nothing here says a thing twice:
     1  .pending — the auction beat as a CSS state: label yields to the
        pulsing tick-dot (ONE pending vocabulary product-wide; the disabled
        recolor lives with its owners in lobby.css / css/kit/trade-widget.css)
     2  .btn-close — the round × : 32px target, hover wash, press, focus
        ring, 44px touch zone. THE close; .md-x is gone.
     3  gliding segmented thumb — the raised .on travels (with js/kit/kit.js)
     4  states kit — empty (the .lb-empty recipe, one voice) · skeleton ·
        banner in two severities (caution = --warn · blocking = --down)
   ========================================================================== */

/* ---- 1 · CTA pending — the tick-dot, centered (the flow/widget "Placing…"
   beat, as a bare state for CTAs whose label can't change). Dot color rides
   the CTA's own label color, sampled before the label fades. ---- */
:where(.md-cta, .tf-cta, .tw-cta, .place-btn).pending{
  color:transparent; pointer-events:none; position:relative;
}
:where(.md-cta, .tf-cta, .tw-cta, .place-btn).pending::after{
  content:""; position:absolute; inset:0; margin:auto; width:8px; height:8px;
  border-radius:50%; background:oklch(1 0 0/.92);
  animation:kitTick 1s var(--ease-inout,ease-in-out) infinite;
}
body.theme-dark :where(.md-cta,.tf-cta,.tw-cta,.place-btn).pending::after{background:oklch(0.2 0.012 262/.92)}
@keyframes kitTick{ 0%,100%{transform:scale(.55);opacity:.5} 50%{transform:none;opacity:1} }
@media (prefers-reduced-motion:reduce){
  /* the beat survives as a steady dot — it's a progress cue, not decoration */
  :where(.md-cta,.tf-cta,.tw-cta,.place-btn).pending::after{ animation:none; }
}

/* ---- 2 · .btn-close ---- */
.btn-close{
  position:relative; width:32px; height:32px; border:0; border-radius:50%;
  display:grid; place-items:center; color:var(--muted); background:none;
  font-size:16px; line-height:1; cursor:pointer;
  transition:color var(--t-fast,.15s), background var(--t-fast,.15s), transform var(--t-press,.07s);
}
.btn-close:hover{ color:var(--ink); background:var(--surface-2); }
.btn-close:active{ transform:scale(.92); }
.btn-close:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.btn-close::after{ content:""; position:absolute; width:44px; height:44px; } /* touch zone */

/* ---- 3 · gliding segmented thumb (enhanced by js/kit/kit.js) ---- */
.glide{ position:relative; isolation:isolate; }
.glide > button, .glide > .cell{ position:relative; z-index:1; }
.glide > button.on, .glide > .on{ background:transparent; box-shadow:none; color:var(--ink); }
.glide > .gl-thumb{
  position:absolute; top:3px; bottom:3px; left:0; width:0; z-index:0;
  border-radius:var(--rad-pill,999px); background:var(--surface);
  box-shadow:var(--crisp); /* the same raise the static .on wore */
  transition:left var(--t-med,.24s) var(--ease-emph),
             width var(--t-med,.24s) var(--ease-emph);
}
@media (prefers-reduced-motion:reduce){ .glide > .gl-thumb{ transition:none; } }

/* ============================ states kit ============================
   One empty block, one skeleton, one banner in two severities —
   amber = caution (can proceed) · coral = blocking (cannot). Severity is
   always the word, never the color alone. */
/* the empty voice — SAME recipe as .lb-empty (../app/lobby.css); one voice, two
   names during migration */
.kit-empty{ font-size:12.5px; line-height:1.55; color:var(--muted); padding:22px 8px; text-align:center;
  border:1px dashed var(--hairline); border-radius:var(--rad-3,16px); text-wrap:pretty; }
.kit-empty .act{ display:block; margin-top:8px; }
.kit-skel{ display:flex; flex-direction:column; gap:8px; }
.kit-skel i{ display:block; height:12px; border-radius:6px;
  background:linear-gradient(90deg, var(--hairline-2) 25%, var(--bg-sunken) 42%, var(--hairline-2) 60%);
  background-size:200% 100%; animation:kitSkel 1.3s linear infinite; }
.kit-skel i:last-child{ width:62%; }
@keyframes kitSkel{ to{ background-position:-200% 0; } }
.kit-banner{ display:flex; gap:9px; align-items:baseline; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--rad-2,12px); padding:10px 12px;
  font-size:12.5px; color:var(--ink-2); box-shadow:var(--crisp); }
.kit-banner .sev{ font-family:var(--font-num); font-size:9.5px; font-weight:600; letter-spacing:var(--track-caps,.07em);
  text-transform:uppercase; padding:1px 7px; border-radius:var(--rad-pill,999px); flex:0 0 auto; }
.kit-banner.caution .sev{ color:color-mix(in oklab,var(--warn) 72%,var(--ink)); background:var(--warn-bg); }
.kit-banner.blocking .sev{ color:var(--down); background:var(--down-bg); }
@media (prefers-reduced-motion:reduce){ .kit-skel i{ animation:none; background:var(--hairline-2); } }