/* Transform engine styles — used by landing.html hero and live.html bubble reveal */
.tx-host{
  --tx-fem:#f9a8d4;--tx-conj:#c4b5fd;--tx-concept:#22d3ee;--tx-reorder:#fb923c;
  --tx-fam-remap:#fb923c;--tx-fam-concept:#22d3ee;--tx-fam-morph:#f9a8d4;--tx-fam-prag:#c4b5fd;
  --tx-gold:#fbbf24;--tx-text:#e8eaed;--tx-dim:#6b7280;
  font-family:'Inter',sans-serif;color:var(--tx-text)
}

.tx-caption{min-height:48px;text-align:center;margin-bottom:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;transition:opacity 0.25s}
.tx-caption.tx-fading{opacity:0}
.tx-rule-tag{display:inline-block;font-size:0.6rem;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;padding:3px 10px;border-radius:10px;background:rgba(251,191,36,0.14);color:var(--tx-gold)}
.tx-rule-text{font-size:0.92rem;color:#cbd5e1;font-weight:500;line-height:1.4;max-width:680px}
.tx-rule-text strong{color:var(--tx-text);font-weight:700}

.tx-grid{display:grid;grid-template-columns:1fr 200px;gap:24px;align-items:start}
@media(max-width:760px){.tx-grid{grid-template-columns:1fr}}

.tx-board{position:relative;padding:8px 0}
.tx-layer{position:relative;padding:8px 0;display:flex;align-items:center;justify-content:center;min-height:60px}
.tx-layer-tag{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:0.5rem;letter-spacing:0.2em;
  text-transform:uppercase;font-weight:700;width:80px;text-align:right;padding-right:14px;color:var(--tx-dim);
  border-right:1px solid rgba(255,255,255,0.06)}
.tx-en .tx-layer-tag{color:var(--tx-dim)}
.tx-re .tx-layer-tag{color:#fcd34d}
.tx-es .tx-layer-tag{color:var(--tx-gold)}
.tx-es-empty{opacity:0.2}
.tx-es-empty .tx-layer-tag{color:var(--tx-dim)}

.tx-row{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;justify-content:center;position:relative;
  margin-left:80px;min-height:48px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.tx-row::-webkit-scrollbar{display:none}
.tx-row > .tx-chip{scroll-snap-align:center;flex-shrink:0}

.tx-conn{position:absolute;left:80px;right:0;height:36px;pointer-events:none;z-index:1;overflow:visible;
  display:block;width:calc(100% - 80px)}
.tx-conn path{fill:none;stroke-width:1.6;stroke-dasharray:5 3;opacity:0;transition:opacity 0.4s ease}
.tx-conn path.tx-shown{opacity:0.7}
/* Arrow hover isolation: when a chip is hovered, paths whose data-from/data-to
   reference any chip in the highlight set get .tx-arc-active; everything else
   gets .tx-arc-dim. Mirrors the chip linked/dim behavior so the line you care
   about pops and the bundle fades back. */
.tx-conn path.tx-arc-active{opacity:1;stroke-width:2.4px;transition:opacity 0.15s ease,stroke-width 0.15s ease}
.tx-conn path.tx-arc-dim{opacity:0.12;transition:opacity 0.15s ease}
.tx-conn path.tx-straight{stroke:var(--tx-dim);stroke-dasharray:none;opacity:0.32}
/* 1:1 identity arrows (already-mapped, no cross) — mute hard so the structural
   crosses stand out. Still visible enough to communicate "this maps to that". */
.tx-conn path.tx-straight.tx-straight-faint{opacity:0.18}
/* Cross arrows are solid (no dasharray) and per-source colored via inline style.
   The opacity stays here; the stroke is set inline by drawArrows so each source
   chip gets its own color and the bundle reads as distinct lanes, not a tangle. */
.tx-conn path.tx-cross{stroke-dasharray:none;opacity:0.85}
.tx-conn path.tx-fresh{animation:txFlashConn 0.8s ease forwards}
.tx-conn path.tx-draw{stroke-dasharray:60;stroke-dashoffset:60;opacity:0.9;
  animation:txDrawArrow 0.55s ease forwards, txDrawWeight 0.55s ease forwards}
.tx-conn path.tx-draw.tx-cross{stroke:var(--tx-gold);stroke-width:2}
.tx-conn path.tx-draw.tx-straight{stroke:var(--tx-gold);stroke-width:1.8;opacity:0.7}
@keyframes txFlashConn{0%{stroke-width:3;opacity:1}100%{stroke-width:1.6;opacity:0.7}}
@keyframes txDrawArrow{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
/* Settle from a thicker brushstroke to the resting weight as the line draws. */
@keyframes txDrawWeight{from{stroke-width:2.4}to{stroke-width:1.6}}

.tx-chip{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.2rem;padding:8px 14px;
  border-radius:9px;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.08);
  color:var(--tx-text);white-space:nowrap;line-height:1.1;position:relative;
  transition:background 0.45s ease,color 0.45s ease,border-color 0.45s ease,box-shadow 0.45s ease,
    transform 0.4s ease}
.tx-chip.tx-flash{box-shadow:0 0 0 3px rgba(251,191,36,0.5),0 0 24px rgba(251,191,36,0.4)}
.tx-chip.tx-moving{z-index:10;box-shadow:0 8px 24px rgba(251,146,60,0.35),0 0 0 2px rgba(251,146,60,0.5)}
.tx-chip.tx-spotlight{box-shadow:0 0 0 2px rgba(251,191,36,0.5),0 0 18px rgba(251,191,36,0.3)}
/* Cross-layer hover-to-link: highlight the hovered chip + its forward and
   reverse links, dim the rest. Sits on top of family colors via box-shadow. */
.tx-chip.tx-chip-linked{box-shadow:0 0 0 2px rgba(251,191,36,0.55),0 0 16px rgba(251,191,36,0.28);opacity:1;z-index:2}
.tx-chip.tx-chip-dim{opacity:0.3;transition:opacity 0.15s ease}
.tx-tone-fem{color:var(--tx-fem);background:rgba(249,168,212,0.1);border-color:rgba(249,168,212,0.3)}
.tx-tone-morph{color:var(--tx-gold);background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.3)}
.tx-tone-conj{color:var(--tx-conj);background:rgba(196,181,253,0.1);border-color:rgba(196,181,253,0.3)}
.tx-tone-concept{color:var(--tx-concept);background:rgba(34,211,238,0.1);border-color:rgba(34,211,238,0.3)}
.tx-tone-reorder{color:var(--tx-reorder);background:rgba(251,146,60,0.1);border-color:rgba(251,146,60,0.3)}

.tx-en .tx-chip{font-size:1.05rem;padding:6px 11px;background:rgba(255,255,255,0.03);color:#9ca3af;border-color:rgba(255,255,255,0.06)}
.tx-en .tx-chip.tx-touched{color:var(--tx-text);background:rgba(251,191,36,0.06);border-color:rgba(251,191,36,0.25)}
.tx-es .tx-chip{color:var(--tx-gold);background:rgba(251,191,36,0.06);border-color:rgba(251,191,36,0.25);font-size:1.15rem}

/* Stepper */
.tx-stepper{display:flex;justify-content:center;gap:7px;margin-top:18px;flex-wrap:wrap}
.tx-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.1);
  transition:all 0.3s;cursor:pointer;border:none;padding:0}
.tx-dot:hover{background:rgba(255,255,255,0.2)}
.tx-dot-passed{background:rgba(251,191,36,0.5)}
.tx-dot-current{background:var(--tx-gold);box-shadow:0 0 8px rgba(251,191,36,0.5);transform:scale(1.3);width:20px;border-radius:5px}
.tx-dot-es{background:rgba(110,231,183,0.18)}
.tx-dot-es.tx-dot-passed{background:rgba(110,231,183,0.55)}
.tx-dot-es.tx-dot-current{background:#6ee7b7;box-shadow:0 0 8px rgba(110,231,183,0.5)}

/* Controls */
.tx-controls{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap;align-items:center}
.tx-btn{font-family:inherit;font-size:0.8rem;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,0.12);background:transparent;color:var(--tx-dim);transition:all 0.2s;
  display:inline-flex;align-items:center;gap:6px}
.tx-btn:hover{color:var(--tx-text);border-color:rgba(255,255,255,0.25)}
.tx-btn-primary{background:rgba(251,191,36,0.12);border-color:rgba(251,191,36,0.4);color:var(--tx-gold)}
.tx-btn-primary:hover{background:rgba(251,191,36,0.22)}
.tx-btn:disabled{opacity:0.3;cursor:not-allowed}

/* Pills sidebar */
.tx-pills-side{display:flex;flex-direction:column;gap:6px;padding:14px 12px;
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:12px;
  min-height:120px;align-self:stretch}
.tx-pills-title{font-size:0.55rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--tx-dim);
  font-weight:700;margin-bottom:6px;text-align:center}
.tx-pills-empty{font-size:0.65rem;color:var(--tx-dim);font-style:italic;text-align:center;
  opacity:0.6;padding:14px 4px;line-height:1.4}
.tx-pills-list{display:flex;flex-direction:column;gap:6px}
.tx-pill{font-family:inherit;font-size:0.7rem;font-weight:700;letter-spacing:0.02em;padding:6px 10px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--tx-text);
  display:flex;align-items:center;gap:8px;transition:all 0.3s ease;width:100%;
  animation:txPillIn 0.45s cubic-bezier(0.22,1,0.36,1)}
.tx-pill-ico{font-size:0.95rem;line-height:1;flex-shrink:0;width:18px;text-align:center}
.tx-pill-lbl{flex:1;text-align:left}
.tx-pill-ct{font-size:0.65rem;font-weight:800;background:rgba(255,255,255,0.1);padding:1px 6px;border-radius:8px;
  min-width:18px;text-align:center;flex-shrink:0;transition:all 0.3s}
.tx-pill-active{animation:txPillFlash 0.7s ease}
@keyframes txPillIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes txPillFlash{0%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px rgba(251,191,36,0.2)}100%{box-shadow:0 0 0 0 transparent}}
.tx-fam-remap{background:rgba(251,146,60,0.14);border-color:rgba(251,146,60,0.45);color:var(--tx-fam-remap)}
.tx-fam-remap .tx-pill-ct{background:rgba(251,146,60,0.28);color:var(--tx-fam-remap)}
.tx-fam-concept{background:rgba(34,211,238,0.14);border-color:rgba(34,211,238,0.45);color:var(--tx-fam-concept)}
.tx-fam-concept .tx-pill-ct{background:rgba(34,211,238,0.28);color:var(--tx-fam-concept)}
.tx-fam-morph{background:rgba(249,168,212,0.14);border-color:rgba(249,168,212,0.45);color:var(--tx-fam-morph)}
.tx-fam-morph .tx-pill-ct{background:rgba(249,168,212,0.28);color:var(--tx-fam-morph)}
.tx-fam-prag{background:rgba(196,181,253,0.14);border-color:rgba(196,181,253,0.45);color:var(--tx-fam-prag)}
.tx-fam-prag .tx-pill-ct{background:rgba(196,181,253,0.28);color:var(--tx-fam-prag)}

@media (prefers-reduced-motion: reduce){
  .tx-chip{transition:none}
  .tx-pill{animation:none}
}