/* ============================================================
   Influenza · Drift vs Shift animation (ported from the approved
   prototype influenza_drift_vs_shift.html). Self-contained widget.
   ALL selectors are scoped under .flu-ds and the tokens live on
   .flu-ds (NOT :root) so nothing leaks to the page — in particular
   the prototype's bare `svg{width:100%}` becomes `.flu-ds .fds-stage svg`.
   Class names are `fds-`-prefixed for the same reason. The animation's
   content / captions / sequence / logic are unchanged (see flu-driftshift.js).
   ============================================================ */
.flu-ds {
  --ink:#111111; --muted:#5b6470; --line:#e3e6ea;
  --human:#2563eb; --avian:#ea580c; --novel:#7c3aed; --teal:#0d9488;
  --bg:#ffffff; --panel:#f7f8fa;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--font); color:var(--ink); max-width:760px; margin:14px auto 0; padding:4px;
}
.flu-ds *{box-sizing:border-box}
.flu-ds .fds-tabs{display:flex;gap:8px;margin-bottom:12px}
.flu-ds .fds-tab{flex:1;border:1px solid var(--line);background:var(--panel);color:var(--muted);
  font-weight:650;font-size:15px;padding:11px 10px;border-radius:12px;cursor:pointer;
  transition:.18s;letter-spacing:.2px;text-align:center}
.flu-ds .fds-tab .sub{display:block;font-weight:500;font-size:11.5px;margin-top:2px}
.flu-ds .fds-tab[aria-selected="true"]{color:#fff;border-color:transparent}
.flu-ds .fds-tab[data-mode="drift"][aria-selected="true"]{background:var(--teal)}
.flu-ds .fds-tab[data-mode="shift"][aria-selected="true"]{background:var(--novel)}
.flu-ds .fds-stage{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;
  height:250px;overflow:hidden}
.flu-ds .fds-stage svg{width:100%;height:100%;display:block}
.flu-ds .fds-cap{min-height:44px;margin-top:10px;padding:11px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;font-size:14.5px;line-height:1.5}
.flu-ds .fds-cap b{font-weight:680}
.flu-ds .fds-controls{display:flex;align-items:center;gap:10px;margin-top:10px}
.flu-ds .fds-btn{border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:14px;
  padding:9px 16px;border-radius:10px;cursor:pointer;transition:.15s}
.flu-ds .fds-btn:hover{background:var(--panel)}
.flu-ds .fds-btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.flu-ds .fds-btn:disabled{opacity:.4;cursor:default}
.flu-ds .fds-dots{display:flex;gap:6px;margin-left:auto}
.flu-ds .fds-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.2s}
.flu-ds .fds-dot.on{background:var(--ink)}
.flu-ds .fds-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.flu-ds .fds-legend span{display:inline-flex;align-items:center;gap:6px}
.flu-ds .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.flu-ds .el{transition:transform .6s ease, opacity .5s ease}