/* =============================================================================
   ShiftHawk — "Types of swaps" interactive (component-scoped, prefix .st-)
   Self-contained. Inherits theme tokens from styles.css (var(--primary), etc.).
   Mounts into <div id="swap-types-mount">. Built by assets/js/swap-types.js.
   ========================================================================== */

.st-wrap {
  --st-accent: var(--primary);
  --st-accent-soft: var(--primary-soft);
  --st-accent-tint: var(--primary-tint);
  display: grid;
  gap: var(--s-6);
}

/* ---------------- Chip row (horizontal scroll on mobile) ---------------- */
.st-chips {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding: var(--s-1) 2px var(--s-3);
  margin: 0 calc(-1 * var(--s-1));
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.st-chips::-webkit-scrollbar { height: 6px; }
.st-chips::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }

.st-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 9px 14px;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.st-chip .ph { font-size: 1.1rem; line-height: 1; color: var(--chip-accent, var(--text-3)); transition: color .18s ease; }
.st-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.st-chip:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 2px; }

.st-chip[aria-selected="true"] {
  background: var(--chip-soft, var(--primary-soft));
  color: var(--chip-deep, var(--primary-deep));
  border-color: var(--chip-accent, var(--primary));
  box-shadow: var(--shadow-sm);
}
.st-chip[aria-selected="true"] .ph { color: var(--chip-accent, var(--primary)); }

/* ---------------- Stage (chips → diagram → caption, vertical stack) -------- */
/* Single column at every width: the animated diagram sits on top, the
   selected type's definition text sits full-width BELOW it. */
.st-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: stretch;
}

.st-diagram {
  position: relative;
  background:
    radial-gradient(560px 440px at 50% 32%, var(--st-accent-soft), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-sm);
  padding: var(--s-6);
  overflow: hidden;
  transition: opacity .28s ease;
}
.st-diagram.is-fading { opacity: 0; }
/* Responsive: viewBox scales the artwork; width:100% keeps it inside the
   ~520px column with no horizontal overflow. Cap the rendered size so the
   diagram stays a comfortable, legible square rather than ballooning. */
.st-svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }

/* ---------------- Caption panel (sits BELOW the diagram, full width) ------- */
.st-caption { transition: opacity .28s ease; text-align: center; }
.st-caption.is-fading { opacity: 0; }

.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--st-accent-soft);
  color: var(--st-accent-deep, var(--st-accent));
  border: 1px solid var(--st-accent-tint);
  margin-bottom: var(--s-3);
}
.st-badge .ph { font-size: 1rem; }

.st-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--text-1);
  margin: 0 0 var(--s-3);
}
.st-eli {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 auto var(--s-4);
  max-width: 46ch;
}
.st-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}
.st-meta .ph { color: var(--st-accent); font-size: 1rem; }

/* ---------------- SVG primitives ---------------- */
.st-person { fill: var(--surface); stroke: var(--st-accent); stroke-width: 3.2; }
.st-person-fill { fill: var(--st-accent); }
.st-person-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  fill: var(--st-accent);
  text-anchor: middle;
  dominant-baseline: central;
}
.st-arrow {
  fill: none;
  stroke: var(--st-accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: .55;
}
.st-arrowhead { fill: var(--st-accent); }

.st-token-pill { fill: var(--surface); stroke: var(--st-accent); stroke-width: 2; }
.st-token-text {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  fill: var(--st-accent-deep, var(--st-accent));
  text-anchor: middle;
  dominant-baseline: central;
}

/* ---------------- Animations (added by .is-animating on .st-svg) ----------- */
/* Arrows draw in via dashoffset. Tokens travel along their path via offset-path. */
.st-arrow { stroke-dasharray: var(--dash, 400); stroke-dashoffset: 0; }
.st-token { opacity: 1; }

.st-svg.is-animating .st-arrow {
  stroke-dashoffset: var(--dash, 400);
  animation: st-draw 3.4s ease-in-out infinite;
}
.st-svg.is-animating .st-token {
  offset-path: var(--mpath);
  offset-rotate: 0deg;
  animation: st-travel 3.4s ease-in-out infinite;
}

@keyframes st-draw {
  0%   { stroke-dashoffset: var(--dash, 400); opacity: .15; }
  22%  { stroke-dashoffset: 0; opacity: .55; }
  82%  { stroke-dashoffset: 0; opacity: .55; }
  100% { stroke-dashoffset: 0; opacity: .55; }
}
@keyframes st-travel {
  0%   { offset-distance: 0%;   opacity: 0; transform: scale(.85); }
  16%  { opacity: 0; transform: scale(.85); }
  26%  { opacity: 1; transform: scale(1); }
  82%  { offset-distance: 100%; opacity: 1; transform: scale(1); }
  92%  { offset-distance: 100%; opacity: 1; transform: scale(1); }
  100% { offset-distance: 100%; opacity: 0; transform: scale(.85); }
}

/* Staggered start per token so they chase around the ring */
.st-token { animation-delay: var(--delay, 0s) !important; }
.st-arrow { animation-delay: var(--delay, 0s) !important; }

/* ============================================================================
   DECORATIONS — make look-alike pairs read differently at a glance.
   weekTags (Simple) · weekStrip (Mirror) · ledger card (Karma / Gift)
   ========================================================================== */

/* --- shared: date tag (Simple) --- */
.st-datetag-box {
  fill: var(--surface);
  stroke: var(--st-accent);
  stroke-width: 1.6;
}
.st-datetag-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  fill: var(--st-accent-deep, var(--st-accent));
  text-anchor: middle;
  dominant-baseline: central;
}
.st-decor-hint {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  fill: var(--text-3);
  text-anchor: middle;
  dominant-baseline: central;
}

/* --- MIRROR: single-week strip + "same week" badge --- */
.st-weekframe {
  fill: var(--st-accent-soft);
  stroke: var(--st-accent-tint);
  stroke-width: 1.5;
}
.st-weekcell-box {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.4;
}
.st-weekcell.is-hi .st-weekcell-box {
  fill: var(--st-accent-soft);
  stroke: var(--st-accent);
  stroke-width: 2.4;
}
.st-weekcell-day {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  fill: var(--text-3);
  text-anchor: middle;
  dominant-baseline: central;
}
.st-weekcell.is-hi .st-weekcell-day { fill: var(--st-accent-deep, var(--st-accent)); }
.st-weekcell-shift {
  fill: var(--st-accent);
  transform-box: fill-box;
  transform-origin: center;
}
.st-svg.is-animating .st-weekcell-shift {
  transform: scaleX(0);
  animation: st-shift-in .9s ease-out forwards;
  animation-delay: var(--hi-delay, .3s);
}
.st-weekbadge-box {
  fill: var(--st-accent);
}
.st-weekbadge-text {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}
.st-weekbadge { transform-box: fill-box; transform-origin: center; }
.st-svg.is-animating .st-weekbadge {
  opacity: 0;
  animation: st-pop-in .5s cubic-bezier(.2,1.3,.5,1) forwards;
  animation-delay: 1.4s;
}
@keyframes st-shift-in {
  from { transform: scaleX(0); opacity: .3; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes st-pop-in {
  0%   { opacity: 0; transform: scale(.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- KARMA / GIFT: "wanted it" / "owed you" tag floating over PAL --- */
.st-paltag-box { fill: var(--st-accent); }
.st-paltag-tip { fill: var(--st-accent); }
.st-paltag-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}
.st-paltag { transform-box: fill-box; transform-origin: center bottom; }
.st-svg.is-animating .st-paltag {
  opacity: 0;
  animation: st-pop-in .5s cubic-bezier(.2,1.3,.5,1) forwards;
  animation-delay: var(--tag-delay, .2s);
}
.st-sparkle {
  fill: var(--banana, #FACC15);
  transform-box: fill-box;
  transform-origin: center;
}
.st-svg.is-animating .st-sparkle {
  opacity: 0;
  animation: st-sparkle 1.6s ease-in-out infinite;
  animation-delay: var(--spark-delay, .6s);
}
@keyframes st-sparkle {
  0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1) rotate(90deg); }
}

/* --- KARMA / GIFT: the ledger card --- */
.st-ledger-box {
  fill: var(--surface);
  stroke: var(--st-accent-tint);
  stroke-width: 1.8;
}
.st-ledger-cap {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  fill: var(--text-3);
}
.st-ledger-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  fill: var(--st-accent-deep, var(--st-accent));
  dominant-baseline: alphabetic;
}
.st-ledger-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  fill: var(--text-1);
  dominant-baseline: central;
}
.st-ledger-sub {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  fill: var(--text-3);
  dominant-baseline: central;
}

/* count cross-fade: FROM fades out, TO fades in. Default (no anim) = show TO. */
.st-ledger-from { opacity: 0; }
.st-ledger-to   { opacity: 1; }
.st-svg.is-animating .st-ledger-from {
  opacity: 1;
  animation: st-fade-out .6s ease forwards;
  animation-delay: var(--ledger-delay, .9s);
}
.st-svg.is-animating .st-ledger-to {
  opacity: 0;
  animation: st-fade-in .6s ease forwards;
  animation-delay: calc(var(--ledger-delay, .9s) + .55s);
}
@keyframes st-fade-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes st-fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* balance-scale motif (Karma) tilts toward "owed", then levels */
.st-motif-beamline, .st-motif-post { stroke: var(--st-accent); stroke-width: 2.4; stroke-linecap: round; }
.st-motif-pan { fill: var(--st-accent); }
.st-motif-beam { transform-box: fill-box; transform-origin: center; }
.st-svg.is-animating .st-ledger-down .st-motif-beam {
  transform: rotate(-16deg);
  animation: st-level .7s ease-out forwards;
  animation-delay: var(--motif-delay, 1.0s);
}
@keyframes st-level {
  from { transform: rotate(-16deg); }
  to   { transform: rotate(0deg); }
}
/* gift-box motif (Gift) */
.st-motif-giftbox, .st-motif-giftlid { fill: var(--st-accent); }
.st-motif-giftribbon { fill: var(--surface); opacity: .85; }
.st-ledger-motif.is-gift { transform-box: fill-box; transform-origin: center; }
.st-svg.is-animating .st-ledger-motif.is-gift {
  animation: st-pop-in .5s cubic-bezier(.2,1.3,.5,1) both;
  animation-delay: var(--motif-delay, 1.0s);
}

/* ---------------- Reduced motion: static, drawn, tokens parked at end ------ */
@media (prefers-reduced-motion: reduce) {
  .st-diagram, .st-caption { transition: none; }
  .st-svg.is-animating .st-arrow,
  .st-svg .st-arrow {
    stroke-dashoffset: 0 !important;
    opacity: .55 !important;
    animation: none !important;
  }
  .st-svg.is-animating .st-token,
  .st-svg .st-token {
    animation: none !important;
    offset-distance: 100% !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Decorations: show FINAL state, no motion.
     Mirror week-shift filled, badge/tag/sparkle visible, ledger at TO state. */
  .st-svg .st-weekcell-shift { transform: none !important; animation: none !important; }
  .st-svg .st-weekbadge,
  .st-svg .st-paltag { opacity: 1 !important; transform: none !important; animation: none !important; }
  .st-svg .st-sparkle { opacity: 1 !important; transform: none !important; animation: none !important; }
  .st-svg .st-ledger-from { opacity: 0 !important; animation: none !important; }
  .st-svg .st-ledger-to   { opacity: 1 !important; animation: none !important; transform: none !important; }
  .st-svg .st-motif-beam  { transform: none !important; animation: none !important; }
  .st-svg .st-ledger-motif.is-gift { animation: none !important; opacity: 1 !important; transform: none !important; }
}