/* ============================================================
   THE LONG GAME — the swap
   One conversation, rewritten in front of you: the line most of us
   say first, struck through, and the line that builds the kid.

   Shared by the home page (its own inline shell) and every page on
   style.css, so colours resolve against either set of tokens.

   Markup is the finished state. Without JS, or with reduced motion,
   that's what shows. swap.js only hides things after it has armed
   the animation, and every line keeps its full size while hidden, so
   nothing moves when it plays.
   ============================================================ */

.swap{
  --sw-ink:var(--ink,#19292B);
  --sw-plate:var(--card,var(--paper,#FFFDF7));
  --sw-pink:var(--pink,var(--accent,#FF5C9E));
  --sw-gold:var(--gold,var(--accent-2,#FFC24A));
  --sw-mute:#6E8083;
  margin:0;
  background:var(--sw-plate);color:var(--sw-ink);
  border:1px solid var(--sw-ink);
  outline:1px solid var(--sw-ink);outline-offset:2px;
}
.swap__bar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--sw-ink);color:var(--sw-plate);
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;
}
.swap__bar small{font-size:inherit;opacity:.7}
.swap__again{
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  background:transparent;color:var(--sw-gold);border:0;padding:0 2px;cursor:pointer;
}
.swap__again:focus-visible{outline:2px solid var(--sw-pink);outline-offset:2px}

.swap__body{padding:clamp(16px,2.4vw,26px) clamp(16px,2.6vw,28px) 6px}

.swap__line{
  position:relative;
  display:grid;grid-template-columns:3.4rem 1fr;gap:0 .6rem;
  margin:0;
  font-family:Archivo,system-ui,sans-serif;font-weight:700;
  font-size:clamp(19px,2.2vw,26px);line-height:1.2;letter-spacing:-.02em;
}
.swap__line + .swap__line{margin-top:clamp(14px,2vw,20px)}
.swap__who{
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding-top:.55em;color:var(--sw-mute);
}
.swap__say{max-width:30ch}

/* the line we retire: struck in ink, then faded back */
.swap__line--old .swap__strike{
  color:var(--sw-mute);
  background:linear-gradient(var(--sw-pink),var(--sw-pink)) 0 58% / 100% 3px no-repeat;
  /* each wrapped line gets its own strike, through the middle of the words */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* the line that builds the kid */
.swap__line--new .swap__who{color:var(--sw-ink)}
.swap__line--new .swap__say mark{
  background:var(--sw-gold);color:inherit;padding:0; /* no padding: the ghost must wrap identically */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* the kid answers: lighter voice, set in from the left */
.swap__line--kid{font-weight:500;font-size:clamp(17px,1.8vw,21px)}
.swap__line--kid .swap__say{
  border-left:3px solid var(--sw-pink);padding-left:.75rem;max-width:34ch;
}

.swap__cap{
  margin:clamp(14px,2vw,20px) 0 0;padding:8px clamp(16px,2.6vw,28px) 10px;
  border-top:1px solid var(--sw-ink);
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-size:12px;line-height:1.5;letter-spacing:.01em;
  min-height:calc(3em + 18px); /* two lines of narration, so it never shoves */
}

/* ---------------------------------------------------- armed state
   Only after swap.js adds .is-armed. The real text stays in the DOM
   (screen readers read it) but transparent; a ghost copy on top does
   the typing. */
.swap.is-armed .swap__line.is-hidden > :not(.swap__ghost){opacity:0}
.swap.is-armed .swap__line--old.is-unstruck .swap__strike{
  color:var(--sw-ink);background-size:0% 3px;
}
.swap.is-armed .swap__line--old .swap__strike{
  transition:background-size .5s cubic-bezier(.6,0,.3,1),color .6s ease .35s;
}
.swap.is-armed .swap__line--kid{transition:opacity .45s ease,transform .45s ease}
.swap.is-armed .swap__line--kid.is-hidden{opacity:0;transform:translateY(6px)}
.swap.is-armed .swap__line--kid.is-hidden > *{opacity:1}

.swap__ghost{
  position:absolute;inset:0;
  display:grid;grid-template-columns:3.4rem 1fr;gap:0 .6rem;
  pointer-events:none;
}
.swap__ghost .swap__say{color:var(--sw-ink);background:none}
.swap__ghost .rest{color:transparent}
.swap__caret{
  display:inline-block;width:0;height:1em;vertical-align:-.12em;
  border-left:2px solid var(--sw-pink);margin-right:-2px;
  animation:swap-blink 1s steps(1) infinite;
}
@keyframes swap-blink{50%{opacity:0}}

/* ------------------------------------------------- say this instead
   The static list that follows a swap: what to retire, what to try. */
.say{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;background:var(--ink,#19292B);
  border:1px solid var(--ink,#19292B);
}
.say li{
  background:var(--card,var(--paper,#FFFDF7));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0 1.25rem;
  padding:14px 16px;align-items:baseline;
}
.say s{
  color:#6E8083;text-decoration-color:var(--pink,var(--accent,#FF5C9E));
  text-decoration-thickness:2px;
}
.say b{font-family:Archivo,system-ui,sans-serif;font-weight:700;letter-spacing:-.015em}
.say .why{
  grid-column:2;display:block;margin-top:4px;
  font-size:.88em;line-height:1.45;color:var(--ink-2,#44585A);font-weight:400;
}
@media (max-width:640px){
  .swap__line,.swap__ghost{grid-template-columns:1fr}
  .swap__who{padding-top:0;margin-bottom:2px}
  .say li{grid-template-columns:1fr;gap:4px}
  .say .why{grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  .swap__caret{animation:none}
}