/* ===========================================================================
   Component styles for SlideCommit and CodeSlots.
   Ported by hand alongside their JS — no third-party CSS.
   =========================================================================== */

/* ---------------------------------------------------------------- SlideCommit */
.sc{display:inline-block;width:100%;max-width:340px;height:52px}
.sc-track{
  position:relative;width:100%;height:100%;border-radius:999px;
  background:var(--bg-hi);box-shadow:inset 0 0 0 1px var(--line);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
.sc[data-held] .sc-track{cursor:grabbing}
.sc[data-phase='pending'] .sc-track,
.sc[data-phase='done'] .sc-track{cursor:default}

.sc-label{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
}
.sc-label > span{grid-area:1/1;transition:opacity .2s,filter .2s}
.sc-text{color:var(--ink-3)}
.sc-err{color:var(--red);opacity:0;filter:blur(2px)}
.sc[data-phase='error'] .sc-text{opacity:0;filter:blur(2px)}
.sc[data-phase='error'] .sc-err{opacity:1;filter:none}

.sc-cap{
  position:absolute;top:4px;left:4px;
  width:calc(100% - 8px);height:calc(100% - 8px);
  border-radius:999px;background:var(--gold-hi);color:#1c1405;
  clip-path:inset(0 calc(100% - 44px) 0 0 round 999px);
  outline:none;transition:background .2s,color .2s;
}
.sc[data-phase='done'] .sc-cap{background:var(--green);color:#052e16}
.sc[data-phase='error'] .sc-cap{background:var(--red);color:#450a0a}
.sc-cap:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)}

.sc-arrow,.sc-spin,.sc-done{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  pointer-events:none;font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:opacity .2s,filter .2s;
}
.sc-arrow svg,.sc-done svg{width:18px;height:18px}
.sc-spin{opacity:0;filter:blur(2px)}
.sc-spin::before{
  content:'';width:17px;height:17px;border-radius:99px;
  border:2.2px solid currentColor;border-top-color:transparent;
  animation:sc-spin 0.75s linear infinite;animation-play-state:paused;
}
.sc[data-phase='pending'] .sc-spin{opacity:1;filter:none}
.sc[data-phase='pending'] .sc-spin::before{animation-play-state:running}
.sc[data-phase='pending'] .sc-arrow{opacity:0;filter:blur(2px)}
@keyframes sc-spin{to{transform:rotate(360deg)}}

.sc-done{opacity:0;transform:scale(.95);transition:opacity .2s,transform .2s}
.sc[data-phase='done'] .sc-done{opacity:1;transform:none}
.sc[data-phase='done'] .sc-arrow{opacity:0}

/* ---------------------------------------------------------------- CodeSlots */
.cs{display:inline-block}
.cs-row{
  position:relative;display:inline-flex;gap:8px;cursor:text;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.cs-input{
  position:absolute;inset:0;z-index:4;opacity:0;
  background:transparent;color:transparent;caret-color:transparent;
  font-size:16px;cursor:inherit;
}
.cs-slot{
  position:relative;width:46px;height:54px;border-radius:var(--r);
  overflow:hidden;background:var(--bg-hi);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .18s,background .18s;
}
.cs-slot[data-active]{box-shadow:inset 0 0 0 1px var(--line-gold)}
.cs-row[data-status='error'] .cs-slot{box-shadow:inset 0 0 0 1px rgba(248,113,113,.4)}

.cs-fill{
  position:absolute;inset:0;border-radius:inherit;background:var(--gold-hi);
  transform:scale(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.34,1.3,.5,1),background .2s;
}
.cs-slot[data-filled] .cs-fill{transform:scale(1)}
.cs-row[data-status='error'] .cs-fill{background:var(--red)}
.cs-row[data-status='success'] .cs-fill{background:var(--green)}

.cs-digit{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  color:#1c1405;font-size:22px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.cs-slot[data-filled] .cs-digit{opacity:1;transform:none}
.cs-row[data-status='error'] .cs-digit{color:#450a0a}

.cs-caret{
  position:absolute;z-index:3;top:26%;left:22px;width:1.5px;height:48%;
  background:var(--gold-hi);opacity:0;pointer-events:none;
  transition:transform .18s var(--ease);
}
.cs-caret[data-show]{opacity:1;animation:cs-blink 1s steps(1) infinite}
@keyframes cs-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (max-width:420px){
  .cs-slot{width:40px;height:48px}
  .cs-digit{font-size:19px}
  .cs-row{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .sc-spin::before,.cs-caret{animation:none}
}